我正在使用AngularJS版本1.2.11。我已经设置了一个工具栏，可以使用ng-Animate(显示和隐藏)进行过渡。
这是HTML：
<div>
<div class="full-height">
<menu-main class="full-height pull-left"></menu-main>
<menu-sub class="full-height pull-left" ng-show="data.active" ng-animate="'animate'">
</menu-sub>
</div>
</div>
这是相同工具栏元素的CSS
.animate.fade-hide,.animate..fade-show {
-webkit-transition:all cubic-bezier(0.250,0.460,0.450,0.940) 3.5s;
-moz-transition:all cubic-bezier(0.250,0.940) 3.5s;
-o-transition:all cubic-bezier(0.250,0.940) 3.5s;
transition:all cubic-bezier(0.250,0.940) 3.5s;
}
.animate.fade-hide,{
position: fixed;
top: 500px;
opacity: 0.3;
}
.animate.fade-hide,.animate.fade-hide-active
{
position: fixed;
top: 500px;
opacity: 0.3;
}
.animate.fade-show {
position: fixed;
top: 100px;
opacity: 1;
}
.animate.fade-show,.animate.fade-show-active {
position: fixed;
top: 100px;
opacity: 1;
}
动画不起作用，我不确定我是否正确这样做。
ng-animate属性在1.2中已弃用，不再使用。相反，动画现在是基于类的。
还要确保引用angular-animate.js并将ngAnimate添加为依赖模块：
var app = angular.module('myApp',['ngAnimate']);
然后，您可以命名动画，例如’fadein’和’fadeout’，并按照Angular documentation中的特殊命名约定，使用一些其他类来装饰它们。
关于这个主题的另一个好消息来源是Year of moo。
法丁的例子：
/* After the transition this will be the only class remaining */
.fadein {
-webkit-transition:all cubic-bezier(0.250,0.940) 1.5s;
-moz-transition:all cubic-bezier(0.250,0.940) 1.5s;
-o-transition:all cubic-bezier(0.250,0.940) 1.5s;
transition:all cubic-bezier(0.250,0.940) 1.5s;
opacity: 1; /* Default value but added for clarity */
}
/* Initial state when showing */
.fadein.ng-hide-remove {
opacity: 0;
display: block !important;
}
/* Will transition towards this state */
.fadein.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
演示：http://plnkr.co/edit/V9w2EwUh0unszf62TZZB?p=preview