为何内部元素的opacity过渡动画无法生效？

核心原因 #

浏览器的渲染机制决定了：display: none的元素不会被纳入渲染树，相当于在页面中“不存在”。当你在同一操作里把元素从display: none改为display: block，同时设置opacity: 1时，浏览器会把这两个属性变更合并为一次渲染操作——直接生成display: block且opacity: 1的最终状态，不会保留opacity: 0的中间状态，自然无法触发过渡动画。

过渡动画的触发前提是元素存在前后可计算的状态变化，而display: none到display: block的切换会让元素状态从“无”直接跳到“有”，浏览器不会为这个过程保留之前的opacity: 0状态来执行过渡。

解决方案 #

下面是几种常用的可行方案：

1. 用visibility替代display（纯CSS）

visibility属性不会把元素移出渲染树，只是让它不可见，配合opacity和pointer-events可以完美模拟display: none的效果，同时保留过渡：

.outer {
  position: relative;
  height: 10rem;
  width: 10rem;
  background: blue;
  color: white;
}

.inner {
  position: absolute;
  inset: 2.5rem;
  background: cyan;

  visibility: hidden; /* 初始隐藏，但元素仍在渲染树 */
  opacity: 0;
  transition: visibility 0s linear 1s, opacity 1s ease; /* 隐藏时先等opacity过渡完再隐藏visibility */
  pointer-events: none; /* 防止隐藏时触发鼠标交互 */
}

.outer:hover .inner {
  visibility: visible;
  opacity: 1;
  pointer-events: auto; /* 恢复交互 */
  transition-delay: 0s; /* 显示时立即让visibility生效 */
}

2. 用JS延迟设置opacity（兼容display场景）

如果必须使用display: none，可以通过requestAnimationFrame让浏览器先渲染出display: block且opacity: 0的状态，再触发过渡：

/* CSS 保持基础样式 */
.outer {
  position: relative;
  height: 10rem;
  width: 10rem;
  background: blue;
  color: white;
}

.inner {
  position: absolute;
  inset: 2.5rem;
  background: cyan;

  display: none;
  opacity: 0;
  transition: opacity 1s ease;
}

const outer = document.querySelector('.outer');
const inner = document.querySelector('.inner');

// 鼠标移入时
outer.addEventListener('mouseenter', () => {
  inner.style.display = 'block';
  // 等浏览器完成display的渲染后，再设置opacity
  requestAnimationFrame(() => {
    inner.style.opacity = '1';
  });
});

// 鼠标移出时
outer.addEventListener('mouseleave', () => {
  inner.style.opacity = '0';
  // 等opacity过渡完成后，再设置display: none
  setTimeout(() => {
    inner.style.display = 'none';
  }, 1000); // 时长要和transition的opacity时长一致
});

3. 用transform配合opacity（高性能方案）

利用transform属性（如scale(0)、translate）来隐藏元素，transform不会触发页面重排，性能更优，同时能和opacity一起实现流畅过渡：

.outer {
  position: relative;
  height: 10rem;
  width: 10rem;
  background: blue;
  color: white;
}

.inner {
  position: absolute;
  inset: 2.5rem;
  background: cyan;

  opacity: 0;
  transform: scale(0); /* 初始缩放到0，视觉隐藏 */
  transition: opacity 1s ease, transform 1s ease;
}

.outer:hover .inner {
  opacity: 1;
  transform: scale(1); /* 恢复原尺寸 */
}

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