Angular JS: временно отключить анимацию, предоставленную директивой, чтобы она не анимировалась при загрузке страницы?

В качестве названия см. эту скрипку:

http://jsfiddle.net/goodwill/ezNuj/

Который я добавил директиву со следующим кодом:

myApp.directive('ngFadeIn', function() {
  return function(scope, element, attr) {
    if (element.is('tr, tbody')) {
      element.find('td').effect("highlight", {}, 500);
    } else {
      element.effect("highlight", {}, 500);
    }
    return scope.destroy = function(complete) {
      return element.fadeOut(500, function() {
        if (complete) {
          return complete.apply(scope);
        }
      });
    };
  };
});

Проблема, с которой я сталкиваюсь, заключается в том, что при первой загрузке страницы, потому что я применил директиву в элементе ng-repeat, все элементы получили эффект подсветки (мигают один раз) при первой загрузке страницы. Как можно пропустить этот эффект без лишнего хака (в идеале все делается внутри директивы)


animation jquery angularjs directive
person William Yeung    schedule 22.02.2013    source источник

Ответы (4)


arrow_upward
0
arrow_downward

Интересно, я не уверен, что для этого есть простое и чистое решение. Кажется, что ngRepeatDirective построен так, чтобы не заботиться о том, работает ли повторитель в первый раз или просто добавляет новые элементы в список. И поэтому он не позволяет вам предпринимать разные действия в зависимости от этого. Директива ui-animate AngularUI, похоже, тоже не решает эту проблему, поэтому я не уверен, что это выполнимо прямо сейчас, не прибегая к надоедливым тайм-аутам.

Что вы можете сделать, так это изменить ngRepeatDirective, чтобы проверить что-то вроде атрибута ng-repeat-finished и выполнить его после завершения повторителя. Тогда должно быть тривиально добавить логику, чтобы избежать анимации на первом повторителе.

Кстати, вы не должны называть свои директивы префиксом ng, так как это то, что Angular использует внутри. Вы должны придумать собственный префикс для своего приложения.

person Anders Ekdahl    schedule 22.02.2013

arrow_upward
0
arrow_downward

Если бы мы могли определить, когда страница завершила рендеринг в первый раз, мы могли бы установить какое-то свойство службы или rootScope, которое может внедрить ваша директива, и, следовательно, проверить это свойство, чтобы определить, следует ли применять анимацию.

К сожалению, не существует способа определить, когда страница закончила рендеринг. См. AngularJS - Как запросить DOM, когда директива рендеринг завершен, что решает ту же проблему.

Единственный обходной путь, который я могу придумать, - это создать другую директиву (использовать ее один раз на странице), которая будет использовать $timeout для простой задержки примерно на 1 секунду, а затем сделать то, что я упомянул выше: установить какое-то свойство для службы или rootScope. Ваша директива fadeIn будет $смотреть это свойство/переменную, и когда значение изменится, она может установить какое-то локальное свойство/логическое значение/флаг, который разрешает или запрещает анимацию.

person Mark Rajcok    schedule 24.02.2013

arrow_upward
0
arrow_downward

Я бы проверил встроенную анимацию angular, только что выпущенную в версии 1.1.14. Вот отличный обзор новых функций: Анимация в AngularJS. В частности, я бы проверил раздел «условно включить/отключить анимацию». С их сайта:

JS:

//turn on the animation
$scope.myAnimation = { enter: 'cool-enter', leave: 'cool-leave' };

//change the animation
$scope.myAnimation = { enter: 'uncool-enter', leave: 'uncool-leave' };

//remove the animation
$scope.myAnimation = null;

HTML:

<div data-some-directive data-ng-animate="myAnimation"></div>

Еще раз обратите внимание, для этого требуется текущая нестабильная версия angular js 1.1.14.

person Chris Montgomery    schedule 13.04.2013
comment
Да, к сожалению, нам, вероятно, это нужно в стабильной версии, так как есть довольно много директив, которые не работают в 1.1.x. - person William Yeung; 18.04.2013

arrow_upward
0
arrow_downward

У меня такая же проблема с использованием angular 1.4.9. Я не хочу, чтобы анимация ng-repeat происходила в первый раз. Единственный способ, который я нашел для этой работы, - это иметь пользовательскую директиву для родителя ng-repeat и отключить анимацию на короткое время:

(function (){
  'use strict';

  angular
    .module('directives')
    .directive('disableLoadingAnimation', disableLoadingAnimation);

  function disableLoadingAnimation($animate, $timeout) {
    var directive = {
      link: link,
      restrict: 'A'
    };
    return directive;

    function link(scope, element) {
      $animate.enabled(element, false);
      $timeout(function (){
        $animate.enabled(element, true);
      }, 1000);
    }
  }
})();

HTML

<table disable-loading-animation>
   <tr ng-repeat="line in lines">...</tr>
</table>

Мне не нравится тот факт, что я должен установить задержку в 1000 мс, но это более чистый способ, который я нашел до сих пор.

person mchasles    schedule 05.02.2016