更改状态时未添加 ngAnimate ng-leave 类

Question

我正在使用 UI-Router 并尝试实现 ngAnimate 模块动画。

ng-enter 工作正常。但是，我没有看到 ng-leave 被添加到 DOM 中。我知道该类将被临时添加和删除，但它没有。

我正在使用 AngularJS 1.4.7 和 UI Router v0.2.15

这是我的代码：

index.html

    <div class="row">
            <form class="form-horizontal form-left" name="formProfile" novalidate ng-controller="profileController">
                    <fieldset>
                        <div id="form-views" ui-view></div>
                    </fieldset>
                </form>
    </div>

View1.html（这是将加载到 index.html 中的默认视图）

<p>View 1 State</p>
<a class="btn btn-sm btn-primary btn-block btn-cm" ui-sref="create.view2">Next</a>
<div ui-view></div>

View2.html

 <p>View 2 State</p>
 <a class="btn btn-sm btn-primary btn-block btn-cm">Finish</a>

app.js

    angular.module('profileModule',['ui.router', 'ngAnimate']);

    angular.module('profileModule').run(['$state',function($state){
    $state.go('create');
    }]);

    angular.module('profileModule').config(['$stateProvider','$locationProvider',function($stateProvider,$locationProvider){
        $stateProvider.state('create', {
            url:'/create',
            templateUrl: 'view1.html',
            controller: 'profileController'
        });

        $stateProvider.state('create.view2', {
            url:'/view2',
            templateUrl: 'view2.html',
        });
        }]);

有什么建议为什么在加载 create.view2 状态时没有将 ng-leave 添加到 <div id="form-views" ui-view></div>？

Answer 1

您的 ng-animate 版本也是 1.4.7 吗？你没有发布你的 CSS。我相信你需要这样做来帮助调试。如果您可以发布一个 真正 有帮助的问题。

此外，如果您还没有查看动画 classNameFilter，因为它只会通过将动画应用于已定义的类来帮助加速您的网站。

$animateProvider.classNameFilter(/animate|ng-toast/);

这是我的 CSS，我使用相同的 angular、ng-animate 和 ui-router：

这个 plunker/answer 提供了一个很好的解决方案：

http://plnkr.co/edit/NsZhDL?p=preview

How can I use ng-animate with ui-view rather than ng-view?

/* Have to set height explicity on ui-view 
to prevent collapsing during animation*/
.well[ui-view]{
 height: 65px; 
}

.ui-view-container {
  position: relative;
}

[ui-view].ng-enter, [ui-view].ng-leave {
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

[ui-view].ng-enter {
  opacity: 0;
  -webkit-transform:scale3d(0.5, 0.5, 0.5);
  -moz-transform:scale3d(0.5, 0.5, 0.5);
  transform:scale3d(0.5, 0.5, 0.5);
}

[ui-view].ng-enter-active {
  opacity: 1;
  -webkit-transform:scale3d(1, 1, 1);
  -moz-transform:scale3d(1, 1, 1);
  transform:scale3d(1, 1, 1);
}

[ui-view].ng-leave {
  opacity: 1;
  /*padding-left: 0px;*/  
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0);
}

[ui-view].ng-leave-active {
  opacity: 0;
  /*padding-left: 100px;*/
  -webkit-transform:translate3d(100px, 0, 0);
  -moz-transform:translate3d(100px, 0, 0);
  transform:translate3d(100px, 0, 0);
}