模型更改的角度动画答案

【问题标题】：Angular animation on model change模型更改的角度动画
【发布时间】：2014-02-15 19:16:10
【问题描述】：

我正在发现 Angular 并且对这个框架印象深刻。

我正在研究动画。它看起来很强大，但我找不到看起来容易的东西。

我有一个绑定在范围内的值。假设<span>{{article.title}}</span>。我想在模型变化时在背景上放一个动画...我怎样才能轻松做到这一点？

提前感谢您的帮助。

【问题讨论】：

你看过ng-animate吗？
是的，但是 nganimate 似乎非常适合 ngswitch、集合中的更改，或者删除或添加 dom 元素时。但是为了在模板中轻松绑定？
对不起，我正在阅读有关以前版本的文章... $animate.addClass 似乎可以满足我的需求...稍后我会进一步挖掘。

标签： angularjs ng-animate

【解决方案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);
            }
        });
    };
}]);

在您的 html 中：

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

我没有测试过，但基本思路是这样的。

【讨论】：