【发布时间】:2014-11-12 16:08:44
【问题描述】:
我正在使用 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%); }
请注意,除了第一次单击其中一个链接并且视图更新时,这一切都可以正常工作,动画不会发生,内容框只会出现。我已经在我现在从事的不止一个项目中注意到了这一点。怎么回事?!
【问题讨论】:
-
我现在有这个问题。还是没有解决办法?
-
@Velter 我认为这里有 2 个问题。第一个可能是正在使用的 Angular 版本。我会确保使用最新版本,它似乎已经修复了很多错误。其次,有时会出现与页面加载有关的问题。如果在图像、JS 或 CSS 仍在加载时触发动画,它并不总是能正常工作。
标签: javascript html css angularjs