Element Anchoring Animation not starting

[geekuillaume]

Hello !
I'm trying to use the element anchoring feature of ng-animate 1.4 using ng-animate-ref.
When transitioning to another view, the element is not moving and the animation does not start.

Here is a JSFiddle of the example: https://jsfiddle.net/3eouz22z/3/ and below a gif of the issue.

I tried on Google Chrome 43.0.2357.18 beta (64-bit) on Linux and on Firefox 37.0.1 on Linux.

Thanks for your great work !

[Narretz]

Can you please try with the latest snapshot? https://code.angularjs.org/snapshot/angular.js

[geekuillaume]

I just tried and the same issue occurs https://jsfiddle.net/3eouz22z/4/

[Narretz]

I think it's mainly a problem with your css code: https://jsfiddle.net/3eouz22z/5/

The trigger css class for anchor animations must be the class on your view + anchor:

.view-anchor {
    transition: 1s all linear;
}

while you had previously:
.video-thumbnail.ng-animate-anchor { transition: 1s all linear; }

[matsko]

Yes @Narretz is correct.

Here is a working version of your code:

http://plnkr.co/edit/NMvWx0NhGylfnRr887sC?p=preview

I've been thinking about this and I think it's best that we generate the -anchor suffix based on the shared classes on the element being transported instead of the container with the enter and leave animations instead. It's just something that comes to mind first when developing this.

[matsko]

@geekuillaume @Narretz now a combination of both the origin/destination element classes as well as the container classes are prefixed and applied to the anchor element. #11822

[matsko]

Actually, it's better that we stick 100% to using the ng-anchor CSS class to drive anchor animations from here on. Here is a PR for that: #11825