解决 transition 在 display 属性上不生效的问题

Transitions 是一组 CSS3 中新增的属性,用来实现元素从一种状态到另一种状态的过渡。

W3C 是这样对其进行描述的:

Normally when the value of a CSS property changes, the rendered result is instantly updated, with the affected elements immediately changing from the old property value to the new property value. These properties are used to animate smoothly from the old state to the new state over time.

简单来说就是 Transitions 需要作用于浏览器已经渲染出来的元素,并且是从一种状态到另外一种状态,而不是从无到有。

然后我们再来看一下 MDN 列出的所有支持动画的 CSS 属性,可以发现 display 属性并不在其中,因此对于 display: nonedisplay: block 的这种过渡不生效也就不难解释了。

但是,功能还是要做的,那么该怎么实现呢?我们可以使用一些变通的方法来做,比如对于隐藏的元素我们可以使用 visibility: hidden 来替代 display: none,下面来看一个例子:

这里来实现一个 hover 淡入的效果,代码及示例效果如下:

See the Pen transitions-on-display-property by Wang Chi (@wangchi) on CodePen.

这样我们就通过结合 visibilityopacity 实现了一个 hover 淡出的效果,这里可能有人会有疑问,元素隐藏时设置 opacity: 0 不就可以了嘛?为啥还要用 visibility: hidden 呢?那是因为只设置透明度为 0 的话,元素本身还是会触发事件的,这显示不够严谨,因此还需要设置 visibility: hidden 避免元素不可见时触发事件。

当然通过 pointer-events: none 也可以解决隐藏元素触发事件的问题。

参考资料