动画ui.router过渡

Question

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

要做到这一点，我使用aside和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

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

如何防止现有视图掉线？

Answer 1

当我设置

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

它正在运作，但可能有更好的解决方案

修改 有了@ryeballar评论你可以把：

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

运作良好。