Question

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

我的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代码（目前从doc复制）是：

.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 { ... }

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

1 个答案: