【问题标题】:Angular ngAnimate not working first time on page loadAngular ngAnimate 在页面加载时第一次不工作
【发布时间】: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


【解决方案1】:

更新:

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

原答案:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-01-09
    • 1970-01-01
    • 2017-09-22
    • 2012-02-22
    • 1970-01-01
    • 1970-01-01
    • 2019-02-17
    相关资源
    最近更新 更多