我一直在尝试使用AngularJS和animate.css使动画正常工作。
因此，我这样创建了SASS：
.slide-animate {
&.ng-enter,
&.ng-leave{
}
&.ng-enter {
-webkit-animation: bounceIn 1s;
-moz-animation: bounceIn 1s;
-o-animation: bounceIn 1s;
animation: bounceIn 1s;
&.ng-enter-active {
}
}
&.ng-leave {
-webkit-animation: zoomOutLeft 1s;
-moz-animation: zoomOutLeft 1s;
-o-animation: zoomOutLeft 1s;
animation: zoomOutLeft 1s;
&.ng-leave-active {
}
}
}
加载页面时，我得到bounceIn动画，当按下链接时，得到了zoomOutLeft动画，但是加载的视图没有动画。
如果在加载浏览器时重新加载该视图，它将执行bounceIn动画。
有人可以从简洁的说明中告诉我什么地方可能出问题了吗？
我的html看起来像这样：
<html>
<head>
<link href="Content/foundation/normalize.min.css" rel="stylesheet" />
<link href="Content/foundation/foundation.min.css" rel="stylesheet" />
<link href="Content/font-awesome.min.css" rel="stylesheet" />
<link href="Content/animate.min.css" rel="stylesheet" />
<link href="Content/core.min.css" rel="stylesheet" />
</head>
<body ng-app="sapphire">
<section class="slide-animate" ng-view></section>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-cookies.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/angular-touch.min.js"></script>
<script src="Scripts/angular-animate.js"></script>
<script src="scripts/app/app.js"></script>
<script src="scripts/app/controllers.js"></script>
<script src="scripts/app/services.js"></script>
</body>
</html>
最佳答案
我想通了。首先，我在.ng-enter和.ng-leave中添加了背景色，我看到回车的内容被压入了休假的内容之下，所以我想我会玩耍，这就是我想出的与：
.slide-animate {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
&.ng-enter,
&.ng-leave{
}
&.ng-enter {
-webkit-animation: fadeIn 2s;
-moz-animation: fadeIn 2s;
-o-animation: fadeIn 2s;
animation: fadeIn 2s;
&.ng-enter-active {
}
}
&.ng-leave {
z-index: -1;
-webkit-animation: zoomOutLeft 1s;
-moz-animation: zoomOutLeft 1s;
-o-animation: zoomOutLeft 1s;
animation: zoomOutLeft 1s;
&.ng-leave-active {
}
}
}
因为我将z-index设置为-1，所以它将出现在输入框下方。我将实际的.slide-animate设置为绝对并填充了屏幕，仅是因为angular似乎在加载新内容时创建了第二个视图，并在所有内容完成后将其移除。因此，将位置设置为绝对允许内容位于彼此之上。