@@ -431,54 +435,12 @@ Starting of transitions {#starting} - - Implementations must also maintain a set of - completed transitions, - each of which - (like running transitions) - applies to a specific element and non-shorthand property. - - This specification maintains the invariant that - there is never both a running transition and - a completed transition for the same property and element. - - - If an element is no longer in the document, implementations must cancel any running transitions - on it and remove transitions on it from the - completed transitions. + on that element. - - - - This set of completed transitions - needs to be maintained - in order to prevent - transitions from repeating themselves in certain cases, - i.e., to maintain the invariant - that this specification tries to maintain - that unrelated style changes do not trigger transitions. - - - - An example where maintaining the set of completed transitions - is necessary would be a transition on - an inherited property, - where the parent specifies a transition of that property for - a longer duration (say, ''transition: 4s text-indent'') - and a child element that inherits the parent's value specifies - a transition of the same property for a shorter duration - (say, ''transition: 1s text-indent''). - Without the maintenance of this set of completed transitions, - implementations could start additional transitions on the child - after the initial 1 second transition on the child completes. - - - - Various things can cause the computed values of properties on an element to change. @@ -538,29 +500,30 @@ Starting of transitions {#starting} the previous style change event, then transitions are not started for that element in that style change event. - Otherwise, - define the before-change style as - the computed values of all properties on the element as of - the previous style change event, - except with any styles derived from declarative - animations such as CSS Transitions, CSS Animations - ([[CSS3-ANIMATIONS]]), - and SMIL Animations ([[SMIL-ANIMATION]], [[SVG11]]) - updated to the current time. - Likewise, define the after-change style as - the computed values of all properties - on the element based on the information - known at the start of that style change event, - but using the computed values of the 'animation-*' properties from the - before-change style, - excluding any styles from CSS Transitions in the computation, - and inheriting from - the after-change style of the parent. - Note that this means the after-change style does not differ from - the before-change style due to newly created or canceled CSS - Animations. + Otherwise, define the following: +
- Implementations must also maintain a set of - completed transitions, - each of which - (like running transitions) - applies to a specific element and non-shorthand property. - - This specification maintains the invariant that - there is never both a running transition and - a completed transition for the same property and element. - -
If an element is no longer in the document, implementations must cancel any running transitions - on it and remove transitions on it from the - completed transitions. + on that element.
- This set of completed transitions - needs to be maintained - in order to prevent - transitions from repeating themselves in certain cases, - i.e., to maintain the invariant - that this specification tries to maintain - that unrelated style changes do not trigger transitions. -
- An example where maintaining the set of completed transitions - is necessary would be a transition on - an inherited property, - where the parent specifies a transition of that property for - a longer duration (say, ''transition: 4s text-indent'') - and a child element that inherits the parent's value specifies - a transition of the same property for a shorter duration - (say, ''transition: 1s text-indent''). - Without the maintenance of this set of completed transitions, - implementations could start additional transitions on the child - after the initial 1 second transition on the child completes. -
Various things can cause the computed values of properties on an element to change. @@ -538,29 +500,30 @@ Starting of transitions {#starting} the previous style change event, then transitions are not started for that element in that style change event. - Otherwise, - define the before-change style as - the computed values of all properties on the element as of - the previous style change event, - except with any styles derived from declarative - animations such as CSS Transitions, CSS Animations - ([[CSS3-ANIMATIONS]]), - and SMIL Animations ([[SMIL-ANIMATION]], [[SVG11]]) - updated to the current time. - Likewise, define the after-change style as - the computed values of all properties - on the element based on the information - known at the start of that style change event, - but using the computed values of the 'animation-*' properties from the - before-change style, - excluding any styles from CSS Transitions in the computation, - and inheriting from - the after-change style of the parent. - Note that this means the after-change style does not differ from - the before-change style due to newly created or canceled CSS - Animations. + Otherwise, define the following:
Note that this definition of the after-change style @@ -635,6 +598,11 @@ Starting of transitions {#starting} ''0px 0px black'' and ''inset 10px 10px black'' are not [=transitionable=]. + A property on a given element is affected by an animation + when there is a relevant animation for that element + whose animation effect is associated with that property + through its target properties. + For each element and property, the implementation must act as follows: @@ -646,17 +614,18 @@ Starting of transitions {#starting} the element does not have a running transition for the property, +
- Note that above rules mean that - transitions do not start when the computed - value of a property changes as a result of declarative animation - (as opposed to scripted animation). - This happens because the before-change style includes up-to-date - style for declarative animations. -
+<style> + #target { + transition: width 1s; + width: 100px; + } +</style> +<script> + let animation = target.animate([{ "width": "200px" }], { duration: 1000 }); + animation.finished.then(() => { + animation.commitStyles(); + animation.cancel(); + }); +</script> +
+ The call to commitStyles() + will trigger a style change event, + with the before-change + width being 100px, + and the after-change + width being 200px. + However, + since width is affected by an animation + at the time of the previous style change event, + no transition will start. +
commitStyles()
width
100px
200px