我正在使用 ngAnimate,除了页面加载后第一次之外,它的效果都很好。
我有一些像这样的html:
<a href="#newcontent"></a>
<!--other html here-->
<div class="content" ng-view></div>
使用路由单击链接时视图会更新,如下所示:
app.config(function($routeProvider) {
$routeProvider
.when('/newcontent', {
templateUrl : 'views/new-content.html',
controller : 'ContentCtrl'
});
});
现在我已经有了 CSS 设置来为内容框设置动画,以便它滑入和滑出。
.content.ng-enter,
.content.ng-leave {
-webkit-transition: all 600ms cubic-bezier(.3,1,.5,1);
transition: all 600ms cubic-bezier(.3,1,.5,1); }
.content.ng-enter,
.content.ng-leave.ng-leave-active {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%); }
.content.ng-enter.ng-enter-active,
.content.ng-leave {
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%); }
请注意,这一切都运行良好,除了第一次单击其中一个链接并且视图更新时,动画不会发生,内容框只会出现。我在我现在从事的多个项目中都注意到了这一点。发生了什么?!