AngularJS Trigger ng-animate при изменении значения привязки

Ответ 1

В 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
});

Вот популярная статья об анимации 1.2: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

Ответ 2

Я думаю, что лучший способ не включает новый JS-код, отличный от ngAnimate.

Возьмем этот пример:

<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" и т.д.

Ответ 3

У меня возникла аналогичная проблема при попытке выделить текст во время связывания данных. Моя цель - выделить текст, который изменяется для более гладкого пользовательского интерфейса. С точки зрения пользовательского интерфейса это гарантирует, что пользователь знает, что меняется при заполнении формы.

Здесь я узнал (я добавил fiddle ниже)

Во-первых, вы не хотите использовать часы. Это создаст неприятный цикл true:: false на ng-классе и, следовательно, не выведет чистый переход.

Во-вторых, вы не можете придумать angular как jquery, где вы найдете элемент и измените его. Ключом к angular является повторное использование, которого мои первоначальные попытки сильно не хватало.

Третий, события, такие как 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 я вызываю функцию выделения и передаю аргумент под названием "имя". Этот аргумент является ключом к повторному использованию.

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

После прохождения, toggle равно аргументу.

Здесь кикер...

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

Когда toggle is == переданному аргументу, тогда выделение применяется, когда оно равно == name '+ false, класс' noToggle 'применяется с гладкой анимацией без эмоций.

Подождите... как насчет ng-blur? Я рад, что вы спросили! ng-blur вызывает функцию doneHighlight и передает один и тот же аргумент класса.

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

Однако при передаче аргумента он также присваивает ложное значение в конце имени класса. Это другое мышление, а затем jQuery, но позволяет мне повторно использовать функции в контроллере для любого количества элементов по мере необходимости;

Надеюсь, это помогло! Я рад ответить на любые другие вопросы.

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