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

Question

我需要在加载不同页面时创建过渡动画，例如当用户离开一个页面时，其他页面通过动画 "position: relative; left: n px" 从屏幕外位置开始并移动到视图中过渡。当新视图完成过渡并覆盖旧视图时，旧视图可以被丢弃。

动画本身很简单。问题是 Angular 会立即破坏旧视图，所以我不能运行任何动画。

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

Answer 1

如果此页面上的最后一个示例接近您所描述的内容：https://docs.angularjs.org/api/ngRoute/directive/ngView，我认为 Angular 不会立即破坏旧视图，而是仅在转换之后才破坏旧视图。在视图转换期间，"view-animate-container" 将 class "ng-leave ng-leave-active" 附加到 old/current 视图 "view-animate"。新视图 "view-animate" 添加 class "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;
}

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

Angular JS have pages from 2 different states visible during state transition ( for animation purpose )

javascript

html

angularjs

angular-ui-router