使用angularjs ui-router和ng-animate打开/关闭动画

Question

我想使用以下方式打开和关闭动画： - AngularJS - ui-router - ng-animate

当前的方法是使用切换父类开/关。这将从dom元素中删除css动画

然而，当我关闭类时，它会破坏javascript端的动画，而angular不会将动画类放回到元素上。这是html：

<div ng-class="{animate:pageanimate}">
    <p>pageanimate = {{ pageanimate }}</p>
    <p><a ng-click="pageanimate=!pageanimate">toggle animate</a></p>
    <div class="well" ui-view></div>        
</div>

css使用来自父级的animate类：

.animate .ng-enter {
    -webkit-transition:all 0.8s ease-in-out 0.7s;
    -moz-transition:all 0.8s ease-in-out 0.7s;
    -o-transition:all 0.8s ease-in-out 0.7s;
    transition:all 0.8s ease-in-out 0.7s;
}

还有一名工作人员 http://plnkr.co/edit/cAkseveonU8394FccjeL?p=preview

Answer 1

这是我在ui-router

中的表现

  app.run(['$animate',function($animate){
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){

         //below are routes where animation is off
        if(toState.name=='portal.inbox' || toState.name=='portal.sent')
            $animate.enabled(false);            
        else
            $animate.enabled(true);

    });
 }]);