AngularJS Trigger ng-animate when binding value change

Question

I have a directive where some content is bound via ng-html-bind-unsafe. I like to have a transition when the content changes. I can use jquery to fade it out, change the content value and fade it back in.

Is there a more elegant way with AngularJS ?

Answer 1

I think there's a better way that involves no new JS code other than including ngAnimate.

Take this example:

<span class="my-example value-{{myValue}}">{{myValue}}</span> 

By setting a class that uses the value, I can uses ngAnimate abilities for class changes.

In my SCSS (or LESS) I would write:

span.my-example{     display: inline-block;     padding: 0 3px;     background-color: white;     transition: background-color 0.26s linear 0s;     &[class*="-add"] {         background-color: yellow;     } } 

And voila! The background colour would change to yellow and back every time the value changes as ngAnimate automatically adds and removes classes like 'value-2-add', 'value-10-add', etc...