css - 加载和页面转换时的 Angular2 动画

Question

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

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 到 View 将是 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 团队的一个已知问题，即路由器 View 更改时的动画。当前有一个 SO question解决了这个问题和 Angular2 repo 票(在 Günter Zöchbauer 在 SO 问题的评论中提到)。有了这个，我很好奇目前是否有任何解决方法？通过一些简短的研究，看起来可能曾经实现了一个 ng-enter 和 ng-leave 可以在他们的 css 中为此使用，但从我的 Angular 来看可以看出这些已经被淘汰了。仍然需要做更多的研究，所以我可能是错的。

在此先感谢您的帮助!

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

更新(7.13.16):看起来 Angular2 团队已经做了一些修复，计划与 RC5 一起发布，应该可以解决我的上述问题。将回答我自己的问题并关闭。

Answer 1

将结束这个问题。我上面提到的大多数问题看起来已经在 Angular2 的 RC5 中得到解决。看起来这将是等待游戏的时间。以下是 Angular 存储库中各个问题/PR 的链接:

我的直觉是元素在页面加载之前是动画是正确的，并且已经在这个 PR 中得到解决:https://github.com/angular/angular/pull/9887

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

至于移动问题。我仍在尝试找出在移动设备上重新创建错误的方法(即 - 在 plunker 中)，但到目前为止还没有成功。不过，对于我的网站而言，这不是一个破坏性 问题，所以我现在将继续前进。