CSS3转换会延迟事件捕获/冒泡吗?

时间:2011-11-29 10:39:25

标签: events css3 transition

正如您在this example中所看到的,为元素设置:hover行为似乎会延迟其状态被其子元素识别。

例如这个HTML,

<p>Here's some text.
<span>This will highlight later.</span>
Here's some more text.</p>

使用CSS:

p:hover{
color:#FE6
}
p,span{
-webkit-transition-property:all;
-webkit-transition-duration:1s;
-moz-transition-property:all;
-moz-transition-duration:1s;
-o-transition-property:all;
-o-transition-duration:1s;
}

在父元素转换​​结束时使跨度开始转换。这是设计,还是记录为错误?

1 个答案:

答案 0 :(得分:1)

我相信会发生什么:

  
      
  1. 过渡的开始
  2.         

    当可动画属性的值发生变化时,实现必须   根据的值确定要开始的转换   '过渡 - 财产','过渡期',   'transition-timing-function'和'transition-delay'属性   改变的时间。由于此规范没有定义什么   属性变化被认为是同时发生的,作者应该知道   在很短的时间内改变任何过渡属性   在进行可能转换的更改后可能会导致行为   因实施变化而异,因此可能会有所不同   在某些实施中被认为是同时的而不是其他的。

         

    一旦物业的过渡开始,它必须继续   基于原始计时功能,持续时间和延迟运行,   即使是'transition-timing-function','transition-duration',或者   “转换延迟”属性在转换完成之前发生更改。   但是,如果'transition-property'属性发生变化,那么   过渡不会开始,过渡必须停止(和   财产必须立即改为最终价值。)

         

    当计算出的值时,实现不得启动转换   由于声明性动画而导致属性发生变化(而不是   脚本动画)。

         

    实现也不能在计算时启动转换   值更改,因为它是从(直接或间接)继承的   转换同一属性的另一个元素。

http://www.w3.org/TR/css3-transitions/#the-transition-property-property-

由于您将选择器指定为p, spanspan嵌套在p内,p中的颜色更改会阻止span并使其延迟

请注意,color是继承的,因此您无需在两个元素上指定它 - p就足够了。