角度ngAnimate在网页加载时无法第一次工作 [英] Angular ngAnimate not working first time on page load

问题描述

我使用ngAnimate除非在网页载入后第一次使用，效果非常好。

 < a href =＃newcontent>< / a> 
 
<！ -  other html here  - > 
 
< div class =contentng-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立方贝塞尔（.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（和角动画）到v1.3.8。回复到v1.2.28使这个工作再次。 （虽然我使用Javascript动画，而不是基于类的）。我不知道这是一个预期的更改或错误，也许有一个更深的知识角度和更改日志可以提供进一步的信息这个...

I'm using ngAnimate which works great except for the first time after page load.

I have some html like this:

<a href="#newcontent"></a>

<!--other html here-->

<div class="content" ng-view></div>

The view updates when links are clicked using routing like so:

app.config(function($routeProvider) {
  $routeProvider

  .when('/newcontent', {
    templateUrl : 'views/new-content.html',
    controller  : 'ContentCtrl'
  });
});

Now I have my CSS setup to animate the content box so it slides in and out.

.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%); }

Note that this all works perfectly except the first time one of the links is clicked and the view updates, the animation does not happen, the content box just appears. I've noticed this on more than one project I've worked on now. What's happening?!

解决方案

Update:

It looks like working properly again in v1.3.10.

Original answer:

I've just run into this problem after upgrading angular (and angular-animate) to v1.3.8. Reverting back to v1.2.28 made this work again. (Albeit I'm using Javascript animations instead of class based ones.) I'm not sure if it's an intended change or a bug, maybe someone with deeper knowledge of angular and the changelog could provide further info on this...

这篇关于角度ngAnimate在网页加载时无法第一次工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！