动画 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 class 包裹起来，如下所示：

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

效果很好。