Css 不适用于 ng-enter、ng-leave

Question

我是 Angular 动画的新手，我想添加它。 尽管由于某种原因它不起作用。

我的html(相关部分)

<div class="wrapper">
<div ng-view class="view-animate"></div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="app.js"></script>

我的应用包含 ngAnimate。

var myApp=angular.module('myApp', [
'ngAnimate',
'ngRoute', //myFiles]);

我的 css 代码(目前是从文档中复制的)是:

.wrapper{
margin: -10px auto -5px;
position: relative;
height: auto;
max-width: 1100px;
font-size: 0.7rem;
overflow: hidden;
}

.view-animate.ng-enter, .view-animate.ng-leave {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;

    display:block;
    width:100%;
    border-left:1px solid black;

    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding:10px;
}

.view-animate.ng-enter {
    left:100%;
}
.view-animate.ng-enter.ng-enter-active {
    left:0;
}
.view-animate.ng-leave.ng-leave-active {
    left:-100%;
}

请帮助我，我不知道我做错了什么。

Answer 1

在您的示例中，Angular 无法识别动画属性，在之前添加:

.view-animate{
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
}

.view-animate.ng-enter, .view-animate.ng-leave { ... }