如何使用显示转换

Question

我希望display:block淡出

HTML：

<div>Fade</div>

CSS：

div{display:none;transition:2s;}
div:hover{display:block;}

不知何故它不起作用，有没有其他方法来实现这种效果？

Answer 1

您无法转换display属性。相反，您应该转换opacity属性。

其根本原因与浏览器渲染管道有关。它需要在转换之前正确布局页面和一个带有1display的元素：none;`没有布局（因此无法转换）。