使用CSS3过渡动画化不可动画的属性

Question

在我的应用程序中,我正在动画页面上元素的不透明度,例如:

.s {
    transition-property: opacity;
    transition-duration: 250ms;
}

(当然,还有特定于供应商的版本).然后

.s.hidden {
    opacity: 0;
}

因此动画在hidden分配类时开始.问题是,鼠标事件与不透明零元素,这是我不希望仍然检测到,所以我需要或者设置visibility到hidden或display到none 后过渡完成.我希望能够做到这样的事情:

.s {
    transition-property: opacity, visibility;
    transition-duration: 250ms;
    transition-delay:    0, 250ms;
}

然后

.s.hidden {
    opacity: 0;
    visibility: hidden;
}

使用CSS过渡机制轻松地完成这项工作.据我所知,这不起作用,因为它visibility是一个不可动画的属性.但其他过渡框架,如D3 做到通过简单的设置值处理非动画的性能,在明显的方式过渡开始的时候,或者当它结束时.

我能够提出的最好的方法是使用transitionend事件(及其特定于浏览器的变体oTransitionEnd)来捕捉过渡的结束并设置visibility在那一点,但我想知道是否有更简单的方法,最好完全坚持使用CSS.或者,正如我的问题的标题所暗示的那样,那是不可动画的属性吗？

Answer 1

visibility 是一个可动画的属性,请参阅规范.

这意味着您的.hidden课程将按照您的描述运作.演示:http://jsfiddle.net/ianlunn/xef3s/

编辑:规格不是很清楚:

可见性:如果其中一个值为"可见",则插值为离散步骤,其中0到1之间的定时功能值映射到"可见"和定时功能的其他值(仅在开始/结束时出现)转换或作为'cubic-bezier()'函数的结果,Y值超出[0,1])映射到更近的端点; 如果两个值都不是"可见",那么就不是可插值的.

但这就是我认为的意思:

visibility并不之间的范围内平稳地动画visible和hidden0.它简单地之间切换-在不透明度动画1之间的方式visible和hidden在过渡的开始和结束状态.

提供转换是转发还是转发visibility,然后将发生转换.如果试图之间的过渡visibility: hidden和visibility: collapse例如,这些价值观是"不倍频细",不会发生转变.

因此,在我的示例中,opacity导致元素淡出,然后在转换结束时,visibility捕捉到hidden.