Angular JS 在状态转换期间有来自 2 个不同状态的页面（用于动画目的）

Question

我需要在加载不同页面时创建过渡动画，例如 当用户离开一个页面时，其他页面会通过动画“位置：相对；左：n px”从屏幕外位置开始并移动到视图中来过渡。当新视图完成过渡并覆盖旧视图时，可以丢弃旧视图。

动画本身很简单。问题是 Angular 会立即破坏旧视图，因此我无法在其上运行任何动画。

我怎样才能使这样的过渡工作？

Answer 1

如果此页面上的最后一个示例与您所描述的内容相近：https://docs.angularjs.org/api/ngRoute/directive/ngView，我认为 Angular 不会立即破坏旧视图，而只会在转换之后。在视图转换期间，“view-animate-container”将类“ng-leave ng-leave-active”附加到旧/当前视图“view-animate”。新视图“view-animate”添加了类“ng-enter ng-enter-active”。

AngularJS 文档目前有

.view-animate.ng-leave.ng-leave-active {
  left:-100%;
}

隐藏它。所以为了在过渡期间看到旧视图，你只需要将“ng-leave.ng-leave-active”的css修改成这样

.view-animate.ng-leave.ng-leave-active {
  left:0;
  opacity: 0;
}