Angular animation on model change

Question

I'm discovering angular and am quite impressed by this framework.

I'm digging into animation. It seems very powerful but I don't find something which seems easy.

I have a value which is binded in the scope. Let's say <span>{{article.title}}</span>. I want to put a animation on the background when the model is changing... How can I do that easily?

Thanks in advance for your help.

Answer 1

app.directive([ "$animate", function ($animate) {
    return function (scope, element, attrs) {
        var oldVal = attrs.animateWhen;
        attrs.$observe('animateWhen', function (value) {
            if (value != oldVal) {
                $animate.addClass(element, attrs.animateClass);
            }
        });
    };
}]);

In your html:

<span data-animate-when="{{ article.title }}" data-animate-class="aAnimationClassYouMakeOrUse">{{ article.title }}</span>

I have not tested it but the basic idea is like this.