在下面的小提琴中,我分别对可见性和不透明度进行了转换。后者有效,但前者无效。此外,在可见性的情况下,过渡时间被解释为悬停时的延迟。在 Chrome 和 Firefox 中都会发生。这是一个错误吗?
http://jsfiddle.net/0r218mdo/3/
Case 1:
#inner{
visibility:hidden;
transition:visibility 1000ms;
}
#outer:hover #inner{
visibility:visible;
}
Case 2:
#inner1{
opacity:0;
transition:opacity 1000ms;
}
#outer1:hover #inner1{
opacity:1;
}
这不是一个错误- 您只能在序数/可计算属性上进行转换(一种简单的思考方式是具有数字开始和结束数值的任何属性......尽管有一些例外)。
这是因为过渡是通过计算两个之间的关键帧来工作的values,并通过推断中间量来生成动画。
visibility
在本例中是一个二进制设置(可见/隐藏),因此一旦过渡持续时间过去,该属性就会简单地切换状态,您将其视为延迟 - 但实际上它可以被视为过渡动画的最终关键帧,其中中间关键帧尚未计算(隐藏/可见之间的值由什么组成?不透明度?维度?由于不明确,因此不会计算)。
opacity
是一个值设置 (0-1),因此可以在提供的持续时间内计算关键帧。
可以找到可转换(可动画)属性的列表here
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)