如何实现点击按钮时文本淡入效果？当前代码仅切换display状态

请问如何实现点击按钮时文本淡入的效果？目前我的代码仅能通过设置display:block和display:none来切换文本的显示与隐藏。

原JavaScript代码 #

<script>
    //Select button by id
    const btn1 = document.getElementById('PowerApps');
    //Add on click listener for button
    btn1.addEventListener('click', function() {
        //Select (h1) heading by id, and then change it's value
        document.getElementById('PowerAppsText').style.display = 'block'
        document.getElementById('streamOpsText').style.display = 'none'
        document.getElementById('TogetherText').style.display = 'none'
    })

    //Select button by id
    const btn2 = document.getElementById('streamOps');
    //Add on click listener for button
    btn2.addEventListener('click', function() {
        //Select (h1) heading by id, and then change it's value
        document.getElementById('streamOpsText').style.display = 'block'
        document.getElementById('PowerAppsText').style.display = 'none'
        document.getElementById('TogetherText').style.display = 'none'
    })

    //Select button by id
    const btn3 = document.getElementById('Together');
    //Add on click listener for button
    btn3.addEventListener('click', function() {
        //Select (h1) heading by id, and then change it's value
        document.getElementById('TogetherText').style.display = 'block'
        document.getElementById('PowerAppsText').style.display = 'none'
        document.getElementById('streamOpsText').style.display = 'none'
    })
</script>

原CSS代码 #

#streamOpsText {
display: none;
}

#TogetherText {
display: none;
}

核心问题说明 #

display: none/block 是瞬间切换的属性，不支持CSS过渡或动画，所以要实现淡入效果，得用**透明度（opacity）和可见性（visibility）**这类可过渡的属性来替代。

方法一：CSS过渡实现平滑淡入 #

这种方法简单直接，适合基础的淡入需求。

1. 更新CSS样式 #

给所有文本元素统一设置过渡规则，默认隐藏（透明度0+不可见），只让默认显示的PowerAppsText保持可见：

/* 给所有文本元素加统一类，方便控制 */
.text-item {
  opacity: 0;
  visibility: hidden;
  /* 设置过渡时长和动画曲线，0.5秒可根据需求调整 */
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* 默认显示PowerApps文本 */
#PowerAppsText {
  opacity: 1;
  visibility: visible;
}

2. 优化JavaScript代码 #

封装重复逻辑，通过修改opacity和visibility来控制显示隐藏，触发过渡效果：

// 先把文本元素都存起来，避免重复获取DOM
const textElements = {
  powerApps: document.getElementById('PowerAppsText'),
  streamOps: document.getElementById('streamOpsText'),
  together: document.getElementById('TogetherText')
};

// 获取按钮元素
const btnPowerApps = document.getElementById('PowerApps');
const btnStreamOps = document.getElementById('streamOps');
const btnTogether = document.getElementById('Together');

// 封装切换文本的函数
function toggleText(targetKey) {
  // 先隐藏所有文本
  Object.values(textElements).forEach(text => {
    text.style.opacity = '0';
    text.style.visibility = 'hidden';
  });
  
  // 显示目标文本：先设为可见，再延迟设置透明度触发过渡
  const targetText = textElements[targetKey];
  targetText.style.visibility = 'visible';
  setTimeout(() => {
    targetText.style.opacity = '1';
  }, 10);
}

// 绑定点击事件
btnPowerApps.addEventListener('click', () => toggleText('powerApps'));
btnStreamOps.addEventListener('click', () => toggleText('streamOps'));
btnTogether.addEventListener('click', () => toggleText('together'));

方法二：CSS动画实现自定义淡入效果 #

如果需要更复杂的动画（比如淡入同时轻微位移），可以用CSS动画。

1. 定义CSS动画 #

/* 定义淡入动画 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* 可选：添加轻微下移效果 */
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.text-item {
  opacity: 0;
  visibility: hidden;
}

/* 激活动画的类 */
.text-item.active {
  animation: fadeIn 0.6s forwards; /* forwards让动画停在最后一帧 */
}

/* 默认显示PowerApps文本 */
#PowerAppsText {
  opacity: 1;
  visibility: visible;
}

2. 修改JavaScript代码 #

通过添加/移除active类来触发动画：

const textElements = {
  powerApps: document.getElementById('PowerAppsText'),
  streamOps: document.getElementById('streamOpsText'),
  together: document.getElementById('TogetherText')
};

const btnPowerApps = document.getElementById('PowerApps');
const btnStreamOps = document.getElementById('streamOps');
const btnTogether = document.getElementById('Together');

function toggleText(targetKey) {
  // 移除所有文本的active类并隐藏
  Object.values(textElements).forEach(text => {
    text.classList.remove('active');
    text.style.opacity = '0';
    text.style.visibility = 'hidden';
  });
  
  // 显示目标文本并添加动画类
  const targetText = textElements[targetKey];
  targetText.style.visibility = 'visible';
  targetText.classList.add('active');
}

btnPowerApps.addEventListener('click', () => toggleText('powerApps'));
btnStreamOps.addEventListener('click', () => toggleText('streamOps'));
btnTogether.addEventListener('click', () => toggleText('together'));

内容的提问来源于stack exchange，提问作者Bastion