AngularJS在绑定值更改时触发动画

Question

我有一个指令,其中一些内容通过绑定ng-html-bind-unsafe.我希望在内容发生变化时进行转换.我可以使用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'等等...

Answer 2

在角度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
});

这是一篇关于1.2动画的热门文章:http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

Answer 3

在尝试在数据绑定期间突出显示文本时遇到了类似的问题.我的目标是突出显示正在更改的文本,以获得更时尚的UI.从UI角度来看,这可以确保用户在填写表单时知道要更改的内容.

这是我学到的东西(我附上了一个小提琴)

首先,你不想使用手表.这将在ng-class上创建一个令人不愉快的true :: false循环,因此不会输出干净的转换.

其次,您不能将角度视为jquery,您可以在其中找到元素并进行更改.角度的关键是可重用性,我最初的尝试严重缺乏.

第三,诸如ng-focus,ng-blur,ng-click,(......以及更多)之类的事件是获得我想要的结果的基础.

我的解决方案是使用ng-focus和ng-blur来检测输入的编辑时间

<input ng-focus="highlight('name')" ng-blur="doneHighlight('name')" 
ng-model="user.name" />

在ng-focus期间,我调用一个高亮函数并通过一个名为'name'的参数.这个论点是可重用性的关键.

 $scope.highlight = function(className){
    $scope.toggle = className;
}

一旦通过,切换等于参数.

这是踢球者......

<div  ng-class="{'toggle': toggle=='name', 'noToggle': toggle=='name'+false}">
    {{user.name}}
</div>

当切换= =到传递的参数时,然后突出显示在==到'name'+ false时应用'noToggle'类应用平滑的unhighlight动画.

等等...... ng-blur怎么样？你很高兴我问!ng-blur调用'doneHighlight'函数并传递相同的类参数.

$scope.doneHighlight = function(className){
    $scope.toggle = className + false;
}

但是,在传递参数时,它还会在类名末尾附加一个false值.这是一个与jQuery不同的思维方式,但允许我在控制器中重用所需的元素;

希望这有帮助!我很乐意回答任何进一步的问题.

http://jsfiddle.net/bebold/8MAKT/1