AngularJS $ animate.addClass не запускает функцию addClass

У меня есть несколько случаев, когда я выполняю анимацию с помощью Angular.

Они оба почти идентичны - все же один работает, а другой нет - я не могу понять, второй не делает.

Ниже, является директива, которая делает работу: - Это существенно оживляет кучу дочерних элементов в пределах element

dwApp.directive('introText', ['$animate', '$rootScope', function ($animate, $rootScope) { 

    return { 
     restrict: 'A', 
     scope: {    
     }, 
     link: function (scope, element, attrs) { 

      scope.animationStarted = false; 

      $rootScope.$on('element-in-view', function (event, parent) {    
       if (!scope.animationStarted) { 
        scope.animationStarted = true; 
        $animate.addClass(element, 'slidein'); 
       }; 
      }); 
     } 
    } 

}]); 


dwApp.animation('.slidein', function() { 

    return { 
     addClass: function (element, className) { 
      TweenMax.staggerTo(element.children(), 2.8, { opacity: 0.85, left: '5%', ease: Circ.easeOut }, 3); 
     } 
    } 

});

Ниже, является директива, которая не работает - консоль что все работает, вплоть до console.log('performing animation'); - рассказывая мне, что функция просто не уволена, и я понятия не имею, почему ...

HTML - это просто

<mask></mask>

dwApp.directive('mask', ['$animate', '$rootScope', function ($animate, $rootScope) { 

    return { 
     restrict: 'E', 
     link: function (scope, element, attrs) { 

      console.log('mask directive') 

      $rootScope.showMask = function() { 
       console.log('showMask called - add class') 
       $animate.addClass(element, 'showmask'); 
      };   

      // test 
      $rootScope.showMask(); 
     } 
    } 

}]); 


dwApp.animation('.showmask', function() { 
    console.log('in showmask animation service'); 
    return { 
     addClass: function (element, className) { 
      console.log('performing animation'); 
      TweenMax.to(element, 1, { opacity: 1 }); 
     } 
    } 

});

При просмотре исходного кода HTML после $rootScope.showMask() был назван я могу видеть, что маска теперь имеет класс

<mask class="showmask"></mask>

Кто-нибудь есть идеи, где я неправильно ?

источник

2013-12-25 Darren

Проблема заключается в том, как вы тестируете showMask().

Если вместо

$rootScope.showMask()

использовать

$timeout(function(){$rootScope.showMask()});

(и добавить соответствующую зависимость.) Затем 'performing animation' регистрируются, а также; и предположительно, если бы я включил tweenmax, он бы что-то сделал.

http://jsfiddle.net/zQfxq/

Кто-то, возможно, придется заполнить мелкие детали о том, почему вызова $rootScope.showMask() в этот момент не работает, как вы ожидали, но я думаю, что это имеет смысл подождать с тестированием до все будет собрано и связано ; и это то, что делает $timeout.

источник

2013-12-25 21:24:22 towr

Awesome! Большое спасибо. Наверное, на стороне заметки, вы знаете, как смотреть AngularJS и увольнять ли это событие, когда закончили компиляцию? – Darren

№ (еще нет: P) И, конечно же, он должен собираться каждый раз, когда он использует новый шаблон; так что это не делается после этого только один раз. Но 'timetime' без аргумента времени всегда срабатывает после выполнения текущего цикла' digest'. – towr

хорошо, отлично. большое спасибо снова. – Darren

Вы пытались использовать для этого переменную элемента?

element.addCLass('showmask')

источник

2013-12-25 18:56:22 qwertmax

Не уверен, что вы читаете весь вопрос, хотя я не просто добавляю класс ... Этот коэффициент просто добавляет класс к моему элементу - этого недостаточно, чтобы начать фактическую анимацию. '$ animate.addClass (элемент, 'myClassName');' делает то же самое, хотя также должен вызывать функцию addClass в моей службе 'dwApp.animation()', это часть angular-animate.js - – Darren

AngularJS $ animate.addClass не запускает функцию addClass

ответ

Смежные вопросы