Question

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

ng-enter工作正常。但是，我没有看到ng-leave被添加到DOM中。我知道课程会暂时添加并删除，但它没有。

我正在使用 AngularJS 1.4.7 和 UI路由器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（/动画| NG-吐司/）;

这是我的CSS，我使用相同的角度，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);
}

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

1 个答案: