Angular ngAnimate第一次加载页面时不起作用

Angular ngAnimate not working first time on page load

本文关键字：不起作用 加载 ngAnimate 第一次 Angular      更新时间：2023-09-26

我使用的是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%); }

请注意，除了第一次单击其中一个链接并更新视图时，这一切都很完美，动画不会发生，内容框只会出现。我已经在我现在从事的不止一个项目中注意到了这一点。发生了什么事？！

更新：

它看起来在v1.3.10中再次正常工作。

原始答案：

我刚刚在将angular（和angular animate）升级到v1.3.8后遇到了这个问题。恢复到v1.2.28使此功能再次发挥作用。（尽管我使用的是Javascript动画，而不是基于类的动画。）我不确定这是一个预期的更改还是一个bug，也许对angular和changelog有更深入了解的人可以提供更多的信息

相关文章：