javascript AngularJS 在绑定值更改时触发 ng-animate
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18991014/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS Trigger ng-animate when binding value change
提问by MR.ABC
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.
我有一个指令，其中某些内容通过ng-html-bind-unsafe. 我喜欢在内容发生变化时进行过渡。我可以使用 jquery 将其淡出，更改内容值并将其淡入。
Is there a more elegant way with AngularJS ?
AngularJS 有更优雅的方式吗？
采纳答案by Fourth
In angular 1.2.0 you can use a directive that watches for content changes and adds then removes the classes. You can tie an animation to those class adds and removes that triggers the fading effect you are looking for.
在 angular 1.2.0 中，您可以使用指令来监视内容更改并添加然后删除类。您可以将动画与那些触发您正在寻找的淡入淡出效果的类添加和删除相关联。
module.directive('contentChange', function(){
return {
scope: {
content: '='
},
template: '<span ng-bind-html="myContent"></span>',
link: function(scope, element, attrs){
scope.$watch('content', function(){
//add fader class to element
scope.myContent = content;
//remove fader class from element
});
};
} //return
});
Here's a popular article on 1.2 animations: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
这里有一篇关于 1.2 动画的流行文章：http: //www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
回答by bitwit
I think there's a better way that involves no new JS code other than including ngAnimate.
我认为有一种更好的方法，除了包含 ngAnimate 之外，不涉及任何新的 JS 代码。
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.
通过设置使用该值的类，我可以使用 ngAnimate 功能进行类更改。
In my SCSS (or LESS) I would write:
在我的 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;
}
}
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...
瞧！当 ngAnimate 自动添加和删除诸如“value-2-add”、“value-10-add”等类时，背景颜色会在每次值更改时更改为黄色并返回。
回答by Alexander Romero
I ran into a similar problem when trying to highlight text during a data bind. My goal is to highlight the text that is being changed for a sleeker UI. From a UI perspective this ensures that the user knows what is being changed while they fill out a form.
在数据绑定期间尝试突出显示文本时，我遇到了类似的问题。我的目标是突出显示正在为更时尚的 UI 更改的文本。从 UI 的角度来看，这可确保用户在填写表单时知道正在更改的内容。
Here's what I learned(I attached a fiddlebelow)
这是我学到的东西（我在下面附上了小提琴）
First,you do not want to use watch. This will create an unpleasant cycle of true::false on ng-class and hence will not output a clean transition.
首先，您不想使用手表。这将在 ng-class 上创建一个令人不快的 true::false 循环，因此不会输出干净的转换。
Second,you cannot think of angular as jquery where you find an element and change it. The key to angular is reusability, which my initial attempts severely lacked.
其次，您不能将 angular 视为 jquery，您可以在其中找到一个元素并对其进行更改。Angular 的关键是可重用性，这是我最初的尝试严重缺乏的。
Third,events such as ng-focus, ng-blur, ng-click, (... and many more), are the bread and butter in getting the results I wanted.
第三，诸如 ng-focus、ng-blur、ng-click 等事件（……以及更多）是获得我想要的结果的基础。
My solution is to use ng-focus and ng-blur to detect when an input was being edited
我的解决方案是使用 ng-focus 和 ng-blur 来检测输入何时被编辑
<input ng-focus="highlight('name')" ng-blur="doneHighlight('name')"
ng-model="user.name" />
During ng-focus I am calling a highlight function and passing through an argument called 'name'. This argument is key to reusability.
在 ng-focus 期间，我调用了一个高亮函数并传递了一个名为“name”的参数。这个论点是可重用性的关键。
$scope.highlight = function(className){
$scope.toggle = className;
}
Once passed through, toggle equals the argument.
一旦通过，toggle 等于参数。
Here's the kicker...
这是踢球者...
<div ng-class="{'toggle': toggle=='name', 'noToggle': toggle=='name'+false}">
{{user.name}}
</div>
When toggle is == to the passed argument then highlight is applied when it is == to 'name'+false the 'noToggle' class is applied with the smooth unhighlight animation.
当切换是 == 到传递的参数然后高亮应用当它 == 到 'name'+false 'noToggle' 类应用平滑的 unhighlight 动画。
Wait...what about ng-blur? I am glad you asked! ng-blur calls a 'doneHighlight' function and passes the same class argument.
等等...ng-blur 呢？我很高兴你问了！ng-blur 调用“doneHighlight”函数并传递相同的类参数。
$scope.doneHighlight = function(className){
$scope.toggle = className + false;
}
However, when passing the argument it also attaches a false value at the end of the classname. This is a different mindset then jQuery but allows me to reuse the functions in the controller for as many elements as necessary;
但是，在传递参数时，它还会在类名的末尾附加一个假值。这是一种与 jQuery 不同的思维方式，但允许我根据需要为尽可能多的元素重用控制器中的函数；
Hope this helped! I am happy to answer any further questions.
希望这有帮助！我很乐意回答任何进一步的问题。
