events - CSS3 转换会延迟事件捕获/冒泡吗？

Question

正如您在 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;
}

使跨度在父元素的过渡结束时开始其过渡。这是设计使然，还是记录为错误？

Answer 1

我相信会发生这样的事情:

1. Starting of transitions

When the value of an animatable property changes, implementations must decide what transitions to start based on the values of the ‘transition-property’, ‘transition-duration’, ‘transition-timing-function’, and ‘transition-delay’ properties at the time of the change. Since this specification does not define what property changes are considered simultaneous, authors should be aware that changing any of the transition properties a small amount of time after making a change that might transition can result in behavior that varies between implementations, since the changes might be considered simultaneous in some implementations but not others.

Once the transition of a property has started, it must continue running based on the original timing function, duration, and delay, even if the ‘transition-timing-function’, ‘transition-duration’, or ‘transition-delay’ property changes before the transition is complete. However, if the ‘transition-property’ property changes such that the transition would not have started, the transition must stop (and the property must immediately change to its final value).

Implementations must not start a transition when the computed value of a property changes as a result of declarative animation (as opposed to scripted animation).

Implementations also must not start a transition when the computed value changes because it is inherited (directly or indirectly) from another element that is transitioning the same property.

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

由于您将选择器指定为 p，span 和 span 嵌套在 p 中 p< 中的颜色变化 停止 span 并使其延迟。

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