如何用JavaScript为display none→block的元素添加平滑动画？

因为display: none无法触发CSS过渡动画（浏览器不会为该属性的变化生成过渡帧），所以我们需要改用透明度（opacity）、**可见性（visibility）**配合CSS过渡来实现平滑效果，同时用JavaScript控制类名切换来触发动画。

完整代码示例 #

HTML

<div id="butStyle">
  <button id="langBut">语言切换</button>
  <button id="enBut">
    <img src="en-icon.png" alt="English">
  </button>
</div>

CSS

#butStyle {
  /* 让按钮并排，可选 */
  display: flex;
  gap: 8px;
  align-items: center;
}

#enBut {
  /* 初始隐藏状态 */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px); /* 加上位移动画更自然 */
  /* 设置过渡属性，控制动画时长和曲线 */
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* 显示状态的类 */
#enBut.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

JavaScript

const butStyle = document.getElementById('butStyle');
const enBut = document.getElementById('enBut');

// 鼠标移入时显示按钮
butStyle.addEventListener('mouseover', () => {
  enBut.classList.add('show');
});

// 鼠标移出时隐藏按钮
butStyle.addEventListener('mouseout', () => {
  enBut.classList.remove('show');
});

关键说明 #

• 为什么不用display: none：该属性的变化是即时的，浏览器不会为其生成过渡动画帧，因此无法实现平滑效果。
• visibility的作用：配合opacity使用，确保按钮隐藏时无法被点击（仅opacity:0的话元素依然可交互）。
• transform的作用：添加位移动画可以让显示/隐藏过程更有层次感，避免单纯透明度变化的单调感，你可以根据需求调整位移方向和距离。
• 过渡时长：示例中用了0.3s，你可以修改这个值来控制动画快慢，ease是缓动曲线，也可以换成linear（匀速）等其他曲线。

如果需要更复杂的动画效果，也可以用CSS @keyframes定义自定义动画，然后通过类名切换触发。

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