加载和页面转换的 Angular2 动画

Posted 2023-03-06

【中文标题】加载和页面转换的 Angular2 动画

【英文标题】：Angular2 Animation on Load and Page Transition

【发布时间】：2016-11-03 07:40:34

【问题描述】：

目前正在尝试使用 ng2 内置的 animations 组件在我的 Angular2 站点中实现一些动画。到目前为止，我一直在研究文档中提供的 Angular 2 Developer Guide - Animations。尽管我遇到了一些问题，但我希望 SO 社区能够提供帮助。我似乎遇到的第一个问题/问题是动画（据我所知）没有运行页面加载。如果我切换到一个视图然后返回到带有动画的视图，它似乎运行得非常好。这是我目前用于相关动画的代码（如果需要，我可以提供整个组件）：

animations: [
  trigger('kissState', [
    state('in', style(opacity: 1)),
    transition('void => *', [
      style(opacity: 0),
      animate('250ms ease-in-out')
    ]),
    transition('* => void', [
      animate('250ms ease-in-out', style(opacity: 0))
    ])
  ])
]

我的印象是，void => * 会将我的 DOM 元素设置为 opacity:0，并且一旦将 in 输入到视图中，它将是 opacity:1。我似乎遇到的另一个问题是我的导航似乎无法在移动设备上运行。我实际上还没有将它们移到我的服务器上，但是在本地开发并通过节点localtunnel 在我的移动设备上查看似乎没有任何动画。这可能是因为localtunnel 的运行方式很奇怪，所以在我能够在实际服务器上真正对其进行测试之前，我并不太担心这一点。这是另一个动画，特别是当我注意到它在我的移动设备上不起作用时：

animations: [
  trigger('offScreenMenu', [
    state('inactive', style(
      opacity: 0,
      zIndex: -10
    )),
    state('active',   style(
      backgroundColor: 'rgba(255, 255, 255, 0.8)',
      zIndex: 10
      )),
    transition('inactive => active', animate('250ms ease-in')),
    transition('active => inactive', animate('250ms ease-out'))
  ])
]

我遇到的最后一个问题是 Angular2 团队的一个已知问题是路由器视图更改的动画。目前有一个 SO question 解决了这个问题，还有一张关于 Angular2 回购的票（在 SO question 中 Günter Zöchbauer 的评论中提到）。有了这个，我很好奇是否有任何现有的解决方法？通过一些简短的研究，看起来可能曾经有一个ng-enter 和ng-leave 可以在他们的css中使用，但据我所知，这些已经被淘汰了。仍然需要做更多的研究，所以我可能错了。

提前感谢您的帮助！

更新（7.7.16）：好吧，所以我决定回到它，在弄乱了页面加载动画的时间之后，它似乎确实在工作。虽然我必须做一个大致的1000ms 动画才能引起注意。这让我想到了我认为动画在 DOM 完全加载之前开始执行的问题（或更多思考）。这似乎有点奇怪。 仍在研究移动动画的情况。看起来我现在要在 Github repo 上提交一个问题，因为我已经弄乱了它，似乎无法让它工作。似乎也没有提到移动动画不适用于 NG2。

更新（7.13.16）：看起来 Angular2 团队已经进行了一些修复，计划与 RC5 一起发布，这些修复应该可以解决我的上述问题。将回答我自己的问题并结束。

【参考方案1】：

要结束这个问题。我上面提到的大多数问题看起来都在 Angular2 的 RC5 中得到了解决。看起来这将是在那之前的等待游戏。以下是 Angular 存储库中各个问题/PR 的链接：

我的预感是在页面加载正确之前元素是 animating，并且已在此 PR 中解决：https://github.com/angular/angular/pull/9887

RC5 将包含一个修复程序，允许通过此 PR 更改路线的动画：https://github.com/angular/angular/pull/9933 和 NG2 最终将允许 query() 用于动画的函数，这将是很棒的（在这方面可以找到更多 here）。

至于移动问题。我仍在尝试找出在移动设备上重新创建错误的方法（即 - 在 plunker 中），但到目前为止还没有成功。我的网站不是breaking 问题，所以我现在继续前进。

【参考方案2】：

Angular 2 最终解决方案

我们可以按照我之前的回答 here 使用内置指令 @routeAnimation 来实现这一点，其中包括一个 plunk。