CSS不适用于ng-enter，ng-leave答案

【问题标题】：Css not working for ng-enter,ng-leaveCSS不适用于ng-enter，ng-leave
【发布时间】：2015-08-23 13:28:09
【问题描述】：

我是角度动画的新手，我想添加它。虽然由于某种原因它不起作用。

我的 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%;
}

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

【问题讨论】：

标签： css angularjs animation ng-animate

【解决方案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 { ... }

【讨论】：