Question

我正在使用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%); }

请注意，除了第一次单击其中一个链接并且视图更新，动画未发生，内容框刚刚出现外，这一切都完美无缺。我已经在不止一个项目中注意到了这一点。发生了什么事？？

Answer 1

<强>更新

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

原始答案：

我在将angular（和angular-animate）升级到v1.3.8之后遇到了这个问题。回到v1.2.28再次使这项工作成功。（虽然我使用的是Javascript动画而不是基于类的动画。）我不确定这是一个预期的更改还是一个bug，也许对角度有更深入了解的人和更改日志可以提供更多信息......

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

1 个答案: