[don't merge]: fix($animateCss): respect transition styles already on the element #13488
Conversation
src/ngAnimate/animateCss.js
Outdated
| flags.hasTransitionAll = flags.hasTransitions && timings.transitionProperty == 'all'; | ||
| flags.applyTransitionDuration = hasToStyles && ( | ||
| (flags.hasTransitions && !flags.hasTransitionAll) | ||
| flags.applyTransitionDuration = options.duration > 0 || hasToStyles && (flags.hasTransitions | ||
| || (flags.hasAnimations && !flags.hasTransitions)); |
There was a problem hiding this comment.
I am not sure if this expressionis correct, but if it is, it can be simplified to:
options.duration > 0 || hasToStyles && (flags.hasTransitions || flags.hasAnimations)
There was a problem hiding this comment.
Same as above: What if options.duration === 0 ?
I think we want to support that as well.
There was a problem hiding this comment.
If the duration is 0, no animation is performed, and no styles are added at all .. but that is only tested for styles that are added to the element, not those that are already on the element
There was a problem hiding this comment.
The problem is that it's not entirely clear what $animateCss should do with styles that are already on the element when it is called. Should it ignore those or incorporate them? With all this addClass and to properties, it becomes really complex.
There was a problem hiding this comment.
Yes, but what if the element has transition styles with transition-duration > 0 whereas options.duration === 0.
E.g. the user wants to have a 0-duration animation (i.e. skip the animation for whatever reason), on an element that would normally animate (because it has transition-duration > 0).
Or is it so edgy a case, that we don't need to support it ? 😃
There was a problem hiding this comment.
The value in the options always takes precedence. I've tested it, whatever is set in the styles, if you options.duration = 0, no animation is run.
There was a problem hiding this comment.
Ah, I see the problem. You are right, if an element has transitions defined before animateCss is called on it, and the user set options.duration: 0, then $animateCss will not animate, but that means the transition styles on the element will take over anyway. So it's actually not possible to overwrite an exisiting transition with duration: 0. @matsko do you think that should be possible?.
Narretz
force-pushed
the
fix-animateCss-12656-rebased
branch
from
d3b7424 to
d34b88e
Compare
|
Mobile Safari is still broken on this one. |
Previously, $animateCss wouldn't use transition styles that were on the element before the animation process started. Precisely, transition property, timing-function and delay were overwritten in the process. Closes angular#12656 Closes angular#13333
- since transition / animation styles are now set on the element even if the transition property is all, the condition for setting the transitionDuration can be simplified - explain why we test for cubic bezier and ease - rename a parameter
Narretz
force-pushed
the
fix-animateCss-12656-rebased
branch
2 times, most recently
from
f7e3533 to
505c11a
Compare
|
Moving to 1.5.x as it not going to make it into 1.5.0 |
Previously, $animateCss wouldn't use transition styles that were on the element
before the animation process started. Precisely, transition property, timing-function
and delay were overwritten in the process.
Closes #12656
Closes #13333