Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I'm using the ui-router's ui-view directive and ng-animate 1.3.8 to add a CSS page transition when the ui-view content is updated on state change. I have the transition working perfectly but I would now like to define a boolean variable in the $rootScope that is set to true while the ui-view animation is occurring and false otherwise.

What is the Angular way of doing this? I've tried defining a new animation with a timeout set to the same time period as the css transition and then attaching it to the ui-view element but it only seems to work intermittently. It also seems completely bad practice so I'm keen to know the correct way. See code below:

In HTML:

<div ui-view="main" class="trans-timer"></div>

Animation:

.animation('.trans-timer', function($timeout, $rootScope) {
  return {
    enter : function(element, done, memo) {
      $rootScope.isAnimating = true;
      $timeout(function () {
        $rootScope.isAnimating = false;
      }, 500);
     }
   };
})

Thanks.

share|improve this question

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.