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

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

本文关键字：状态 两个 动画 用于 JS 转换 Angular      更新时间：2024-01-26

加载不同页面时，我需要创建一个过渡动画，例如当用户离开一个页面时，其他页面通过动画"position:relative；left:npx"从屏幕外的位置开始进入视图。当新视图完成转换并覆盖旧视图时，可以丢弃旧视图。

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

我怎么能让这样的过渡发挥作用？

如果此页面上的最后一个示例与您所描述的非常接近：https://docs.angularjs.org/api/ngRoute/directive/ngView，我不认为Angular会立即破坏旧视图，而只是在转换之后。在视图转换过程中，"视图动画容器"将类"ng leave ng leave active"附加到旧/当前视图"视图动画"。新视图"view animate"添加了类"ng enter ng enter active"。

AngularJS文档目前有

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

因此，为了在转换过程中看到旧视图，您只需要将"ngleave.nglive-active"的css修改为类似的内容

.view-animate.ng-leave.ng-leave-active {
  left:0;
  opacity: 0;
}
相关文章：