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.