14
edits
CSS Transitions: Difference between revisions
→Under-specified Behavior: add information about what happens to element.style.foo during a transition
(state freeze behavior less tentatively since dholbert confirmed the behavior) |
(→Under-specified Behavior: add information about what happens to element.style.foo during a transition) |
||
| Line 37: | Line 37: | ||
Some things are not specified well in the CSS Transitions spec, so I've had to look at webkit's behavior for the intended behavior (or ask Dave Hyatt in some cases). The following are some of my findings: | Some things are not specified well in the CSS Transitions spec, so I've had to look at webkit's behavior for the intended behavior (or ask Dave Hyatt in some cases). The following are some of my findings: | ||
* If the sub-properties are specified separately but there are unequal values specified, they should be handled in the same way that [http://www.w3.org/TR/css3-background/#layering Multiple Backgrounds] are handled in CSS3 | * ''What happens to the underlying Style during a transition?'' | ||
** The specification requires that the computed style should return the intermediate transitioning values, but doesn't specify what value should be returned for the element.style.foo property during a transition | |||
** Testing on webkit reveals that this value is updated to the final value immediately, but it is masked by the animated value until the animation ends. It does not animated. | |||
* ''How do you deal with subproperties that have different numbers of values?'' | |||
** If the sub-properties are specified separately but there are unequal values specified, they should be handled in the same way that [http://www.w3.org/TR/css3-background/#layering Multiple Backgrounds] are handled in CSS3 | |||
** That spec doesn't really address how to handle values of 'inherit' in combination with the 'jagged array' issue, but webkit's implementation treats it as follows: <code>#parent{-webkit-transition-property: opacity, width;}</code> <code>#child{-webkit-transition-property:inherit;-webkit-transition-duration:1s;}</code> will result in <code>#child</code> having two transitions (opacity 1s, and width 1s). In other words, the number of values inherited from the parent is used in determining the total number of transitions. | ** That spec doesn't really address how to handle values of 'inherit' in combination with the 'jagged array' issue, but webkit's implementation treats it as follows: <code>#parent{-webkit-transition-property: opacity, width;}</code> <code>#child{-webkit-transition-property:inherit;-webkit-transition-duration:1s;}</code> will result in <code>#child</code> having two transitions (opacity 1s, and width 1s). In other words, the number of values inherited from the parent is used in determining the total number of transitions. | ||
* If an element's -webkit-transition-* properties are changed (e.g. by dynamically changing the 'class' attribute such that a new set of style rules apply to it), the new style should be used to determine which properties should have active transitions (previous versions of webkit actually used the old style, but at some point the behavior was switched to use the new style's transition definitions) | * ''What happens when an element's -webkit-transition* properties are modified?'' | ||
** If an element's -webkit-transition-* properties are changed (e.g. by dynamically changing the 'class' attribute such that a new set of style rules apply to it), the new style should be used to determine which properties should have active transitions (previous versions of webkit actually used the old style, but at some point the behavior was switched to use the new style's transition definitions) | |||
* webkit does not support any shorthand properties for -webkit-transition-property | * webkit does not support any shorthand properties for -webkit-transition-property | ||
* When animating to or from 'auto' (e.g. for the 'width' property), webkit animates, but treats 'auto' as 0 (in other words, if you don't have a transition active for width, it would end up at a different value than if a transition ''is'' active for width. This is clearly a bug). When changing the property to a percentage (e.g. width:50%), webkit does not animate at all, it just updates the value immediately to the new value. | * When animating to or from 'auto' (e.g. for the 'width' property), webkit animates, but treats 'auto' as 0 (in other words, if you don't have a transition active for width, it would end up at a different value than if a transition ''is'' active for width. This is clearly a bug). When changing the property to a percentage (e.g. width:50%), webkit does not animate at all, it just updates the value immediately to the new value. | ||