ng-animate-ref - Clone doesn't copy contextual styling of original #12402
Comments
|
Sounds resonable! |
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
|
I believe this is the behavior you are experiencing. Your plunker link didn't exhibit the issue for me. http://plnkr.co/edit/OLhhDaz8awp5wzLoeAr1?p=preview I have made a PR #14366 Here is the Plunker with the modified version of ng-animate Let me know what you think! |
|
Hm I guess something went wrong with the plunker or its url. But your plunker shows what i meant. Your example of the modified ng-animate looks good! But thinking about this some more, I would also expect this to work in more advanced cases. For example: In this case, the last row has a This also applies to width and height. |
|
I agree. This is also an issue with elements nested inside the element and their contextual styles. I think there is only so much that you can do 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 angular#12402
|
Another example. ng-style causes this snapping behavior when going to an ng-style. Compared to the modified: |
When an ng-animate-ref element is cloned before an animation, I would expect it to look exactly the same as its source element. Instead, when the source element has styling applied because of the specific context it is in (e.g.
.context .source-element { background: green; }), this styling is not applied to the cloned element.This makes the animation weird: it first snaps to the styling the .source-element would have when in no context, and then animates to its new context. Example: http://plnkr.co/edit/AXzKmQcE5BUx4NXg4cCS?p=preview. When clicking an element, it first snaps to a blue background, before animating to a black background. I would expect it to animate directly from a green to a black background.
This can be worked around by simply applying all styling directly to the source element to be animated (e.g.
.source-element-in-context { background: green; }(see this plunker: http://plnkr.co/edit/Odho9WnoOm9JFv3gzzZl?p=preview), but it makes much more sense to me when angular itself applies all styling of the source element to the cloned element.The text was updated successfully, but these errors were encountered: