Angular ngAnimate 在页面加载时第一次无法工作

2024-04-01

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

请注意,这一切都运行良好,除了第一次单击其中一个链接并且视图更新时,动画不会发生,内容框只会出现。我在我现在从事的多个项目中都注意到了这一点。发生了什么?!


Update:

看起来在 v1.3.10 中又可以正常工作了。

原答案:

我在将 Angular(和 Angular-animate)升级到 v1.3.8 后刚刚遇到这个问题。恢复到 v1.2.28 使此操作再次有效。 (尽管我使用的是 Javascript 动画而不是基于类的动画。)我不确定这是否是有意的更改或错误,也许对角度和更改日志有更深入了解的人可以提供有关此的更多信息...

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular ngAnimate 在页面加载时第一次无法工作 的相关文章

随机推荐