Fix(ng-animate-ref): copy contextual styling to clone

[NickBolles]

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

• The commit message follows our guidelines: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit-message-format
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

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

[gkalpak]

I'm afraid copying over all those properties might be a little overkill.
That said, you can still use CSS to have the appropriate style. (It's just more boilerplate, right ?)

[NickBolles]

What do you mean by "you can still use CSS to have the appropriate style"?
The point of this PR is to not have to know the styles on the element and to avoid issues with contextual styles.

Another example. ng-style causes this snapping behavior when going to or from ng-style.
http://plnkr.co/edit/4QQ1RhHOsQ0w6lLKrJRY?p=preview

Compared to the modified:
http://plnkr.co/edit/TIQR2lv0Wa3zAwqeEhy0?p=preview

[gkalpak]

@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 .record[ng-animate-ref] elements).

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.)

[NickBolles]

@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?

[gkalpak]

I don't think there is a way to use your own implementation (unless you provide your own $animate service, which is obviously not realistic).

The more I think about it, the more I think the best route is to not have conditional styling.
As suggested in the docs, you should rely on simple classes for applying the styling for anchor elements.

[gkalpak]

Maybe @matsko or @Narretz have any insights on this.