使用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);

    });
 }]);