CSS3中的transition是否可以过渡opacity和display？

transition 属性可以过渡 opacity，但不能直接过渡 display。 display 属性的变化是离散的（例如，从 none 到 block），而 transition 旨在处理连续的值变化，例如数字或颜色。 尝试直接使用 transition 过渡 display 不会产生任何动画效果。

要实现类似 display 过渡的效果，通常需要结合其他属性和技巧：

• opacity + visibility + display: none; (推荐): 这是最常用的方法。使用 opacity 从 1 过渡到 0 实现淡出效果，配合 visibility: hidden; 来隐藏元素，最后用 display: none; 彻底移除元素避免占用空间。

.element {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out;
}

.element.hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
}

/*  在 JavaScript 中添加和移除 "hidden" 类 */
element.classList.add('hidden'); // 隐藏
setTimeout(() => { element.style.display = 'none'; }, 300); // 300ms 后移除

element.style.display = 'block'; // 显示
element.classList.remove('hidden');

• height 或 width + overflow: hidden;: 通过将元素的高度或宽度过渡到 0，配合 overflow: hidden; 来隐藏溢出内容，实现类似折叠的效果。这种方法适用于元素的初始高度或宽度是已知的场景。

.element {
  height: 100px; /* 初始高度 */
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}

.element.hidden {
  height: 0;
  transition: height 0.3s ease-in-out;
}

• max-height + overflow: hidden;: 类似于 height 的方法，但使用 max-height 可以处理内容高度不固定的情况。设置一个足够大的 max-height 初始值，然后过渡到 0。

.element {
  max-height: 500px; /* 足够大的初始值 */
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.element.hidden {
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
}

选择哪种方法取决于你的具体需求和布局。opacity + visibility 的方法通常更通用且更易于控制，而基于高度或宽度的方法更适用于特定的折叠或展开动画。

记住，为了使过渡生效，必须设置 transition 属性，指定要过渡的属性和过渡时间。