为什么过渡属性不适用于显示属性？

什么是过渡属性？

CSS3中提供了一种简单的实现动态效果的方式——通过过渡（transition）属性，可以为元素在状态改变过程中添加动画效果。这样可以使得页面更加生动，维护成本也更低。

过渡属性可以为最终样式和初始样式之间的变化指定动画效果，如颜色、尺寸、位置、透明度等。通常通过以下两个步骤来定义过渡：

1. 明确过渡属性所要过渡的元素
2. 指定通过何种方式连接过渡前后的状态

以下是具体的过渡属性：

• transition-delay(延迟)
• transition-duration(持续时间)
• transition-property(属性)
• transition-timing-function(定时方程)

显示属性与过渡属性的区别

显示属性（display）与过渡属性本质不同，导致了过渡属性无法应用于显示属性。

• 显示属性是用于设置元素的显示方式，而不是元素的外观、位置或状态。
• 过渡属性是用于指定元素在状态变化过程中的动画效果，用于设置元素的外观、位置或状态。

因此，对于显示属性，如display: none;不能通过过渡属性来改变，因为过渡属性不能改变元素的显示，只能改变元素的外观、位置或状态。

解决方案

如果需要在元素的显示与隐藏之间添加动画效果，可以使用opacity、visibility、transform、height等过渡属性来代替。

例如，可以通过opacity属性实现元素渐显渐隐的效果：

.show {
  opacity: 1;
  transition: opacity .5s ease-in-out;
}

.hide {
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

这样做不仅可以达到预期效果，而且对浏览器的性能影响较小。

总结

虽然过渡属性不能应用于显示属性，但是使用过渡属性可以为元素的外观、位置或状态添加动画效果，提高页面的动态体验。而且，通过其他过渡属性的搭配使用，可以方便地实现元素的动态效果。