Fix(ng-animate-ref): copy contextual styling to clone #14366
Conversation
Copy all contextual styling to the cloned element. The list of properties that are copied is derived from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties Closes angular#12402
NickBolles
force-pushed
the
ng-animate-ref-context-styles
branch
from
262aad0
to
fb7d67c
Compare
|
I'm afraid copying over all those properties might be a little overkill. |
|
What do you mean by "you can still use CSS to have the appropriate style"? Another example. ng-style causes this snapping behavior when going to or from ng-style. Compared to the modified: |
|
@NickBolles, I know what the point fo this PR is. What I'm saying is that this PR provides a convenience for something that is already possible using CSS (i.e. duplicate the styling for Obviously, having the contextual styles applied automatically is a big improvement, but there is also a significant cost which I am not sure is worth it. (I'm not saying it isn't, I'm just a bit sceptical.) |
|
@gkalpak gotcha. I agree that there is a pretty significant cost. Is there any way to conditionally do this. Such as the promise un wrapping that was removed? Or possible to have my own decorator to do this? Would that be the better route? |
|
I don't think there is a way to use your own implementation (unless you provide your own The more I think about it, the more I think the best route is to not have conditional styling. |
What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)
Fix(ng-animate-ref): copy contextual styling to clone
What is the current behavior? (You can also link to an open issue here)
#12402 Elements "Snap" to non-context aware state before animating.
http://plnkr.co/edit/OLhhDaz8awp5wzLoeAr1?p=preview
What is the new behavior (if this is a feature change)?
The style context is now copied to the cloned element.
http://plnkr.co/edit/EvBFwIGD40pHxewXCYGY?p=preview
Does this PR introduce a breaking change?
No.
Please check if the PR fulfills these requirements
Other information:
I am unsure if tests should be created, or maybe more accurately how to create a test for this.
The same goes for Docs. Except that this seems to be the expected behavior. Maybe a note should be made in the https://docs.angularjs.org/api/ngAnimate#how-is-the-morphing-handled- paragraph though
Copy all contextual styling to the cloned element.
The list of properties that are copied is derived from
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
Closes #12402