AngularJS View Animation Mystery——元素在错误的位置渲染然后解决答案

【问题标题】：AngularJS View Animation Mystery—elements render at wrong position then resolveAngularJS View Animation Mystery——元素在错误的位置渲染然后解决
【发布时间】：2014-08-16 08:28:12
【问题描述】：

使用 angular 并使用 animate.css 处理一些动画，这些动画会在视图进入和离开时应用于视图。到目前为止，我遇到了一个无法解决的问题。

我所追求的：让各种元素像平移一样滑入/滑出

问题：虽然实际的动画效果很好，但视图更改会使它们呈现偏移量，因此它们看起来不会滑动。一秒钟后，应用了正确的样式，但我不知道为什么。我查看了 ng-animate 的文档，尝试停用模块，并以其他方式隔离问题，但似乎无法弄清楚。

杂项：

我正在使用 animate.css 来处理转换，但这似乎不是罪魁祸首，因为转换工作“正常”/在某些情况下应该如此（刷新时，直接加载 URL )
这似乎是重排，有时会在 href 导航上发生，但不会在刷新时发生。尝试在 ng-animate 文档中跟踪这一点，但我无法弄清楚为什么/如何它似乎只发生在来自链接的 href nav 而不是刷新（与模板缓存有关？）
李>
似乎不是特定于浏览器的
在 SO 或其他地方没有看到任何关于此的问题，因此除了答案之外，资源还可以工作

一旦有人知道可能导致问题的区域，我可以包含更多代码。一开始不想包含整个项目:)

使用：一切 1.2.21

棱角分明的
ngAnimate
ngMocks
资源
消毒

会发生以下情况：（注意：我给出的第二个命令是刷新，动画正常发生）

一些初始代码：

我使用这个 mixin 来处理 .ng-enter 和类似的类

  @import "../bower_components/animate.css/animate.sass";
  @mixin panInner($direction, $LeftOrRight) {
      @extend .animated;
      @extend  .slide#{$direction}#{$LeftOrRight};
  }

  @mixin pan{
    .ng-enter, .ng-enter-active {
      @include panInner(In, Right);  

        }
    .ng-leave, .ng-leave.ng-leave-active  {
      @include panInner(Out, Left);    
    }
    .ng-enter-active, .ng-leave-active {
      animation-duration: 2s;
    }  
  }


  @include pan;

这是一个我很长时间以来一直密切关注的项目，所以我总是有可能错过了一些愚蠢的东西，但我希望不会。

【问题讨论】：

标签： javascript css angularjs sass ng-animate

【解决方案1】：

您似乎在为Position: relative 中的页面制作动画，而不是Position: absolute。

这意味着当第一部分动画出来时，第二部分仍然认为它在它“上方”并相应地向下偏移，直到第一部分完成动画并从 DOM 中删除。

使用Position: absolute，动画进入的页面元素不会关心之前的兄弟元素被动画化。请记住，两者都应该在具有相对或绝对位置的同一个包装元素内，这样它们在切换到 Position: absolute 时不会跳起来。

【讨论】：