javascript - AngularJS 绑定(bind)值更改时触发 ng-animate

Question

我有一个指令，其中一些内容通过 ng-html-bind-unsafe 绑定(bind)。我喜欢在内容发生变化时进行过渡。我可以使用 jquery 将其淡出，更改内容值并将其淡入。

AngularJS 有更优雅的方式吗？

Answer 1

我认为有一个更好的方法，除了包含 ngAnimate 之外，不涉及新的 JS 代码。

举个例子:

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

通过设置使用该值的类，我可以使用 ngAnimate 功能进行类更改。

在我的 SCSS(或 LESS)中我会写:

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

瞧!每次值发生变化时，背景颜色都会变为黄色，然后再变回来，因为 ngAnimate 自动添加和删除“value-2-add”、“value-10-add”等类...