Javascript AngularJS视图动画神秘元素在错误位置渲染，然后解决

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

我追求的是：让各种元素滑入/滑出，就像你在平移一样

问题是：虽然实际动画工作正常，但视图更改会以偏移方式渲染它们，使它们看起来不会滑动。一秒钟后，正确的样式被应用，但我不知道为什么。我查看了ng animate的文档，尝试停用模块，并以其他方式隔离问题，但似乎无法解决

杂项：

我使用animate.css来处理转换，但这似乎不是罪魁祸首，因为转换“正常”工作/在某些情况下，在刷新、直接加载URL时，它们应该正常工作

这似乎是回流，有时在href nav上发生，但在刷新时不会发生。尝试在ng animate文档中跟踪这一点，但我不明白为什么/如何它似乎只发生在href nav from links上，而不发生在与模板缓存有关的刷新上

似乎不是特定于浏览器的

在某处或其他地方还没有看到任何关于这方面的问题，所以除了答案之外，资源也起作用

一旦有人知道可能是哪个区域导致了问题，我可以包含更多的代码。不希望首先包括整个项目：

使用： 一切1.2.21

有棱角的 尼莫酸 ngMocks 资源 消毒 下面是发生的情况： 注意：我给出的第二个命令是刷新，动画通常在这里发生

一些初始代码：

我使用这个mixin来处理.ngenter和类似的类

  @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;

---

这是一个我已经近距离接触了很长一段时间的项目，所以我总是有可能错过了一些愚蠢的东西，但我希望不是。

看起来您正在按位置：相对而不是位置：绝对设置页面动画

这意味着，当第一个部分制作动画时，第二个部分仍然认为它在上面，并相应地向下偏移，直到第一个部分完成动画并从DOM中删除

使用Position:absolute时，正在设置动画的页面元素将不关心正在设置动画的前一个同级元素。请记住，两者都应该位于具有相对或绝对位置的同一包装器元素内，以便在切换到位置：绝对时它们不会跳起来