动画 ui.router 过渡

Question

我正在尝试为 ui 路由器的过渡设置动画。

为此，我使用animate.css 和angular-animate，但我遇到了问题：

当过渡发生时，退出视图在向左滑动之前下降（新视图将其向下推）。

less/css 的动画代码是：

.main_view {
  .transition(all 10s);

  &.ng-enter {
    .view-wrapper {
      .fadeInRight;
    }
  }

  &.ng-leave {
    .view-wrapper {
      .fadeOutLeft;
    }
  }
}

.view-wrapper {
  .transition(all 0.5s ease-out);
  .animated;
}

每个视图都用 view-wrapper 类包裹，如下所示：

<div class="view-wrapper">
   ... view content ...
</div>

我在 plunker 中做了两个状态的演示：http://plnkr.co/edit/pweVNMDYb7xTGmNtNE1E?p=preview

如何防止退出的视图下拉？

Answer 1

当我设置时

.main_view{
  position: absolute;
  width: 100%;
}

它正在工作，但也许有更好的解决方案

编辑 使用@ryeballar 评论，您可以添加：

.ng-enter{
  position: absolute;
  width: 100%;
}

效果很好。