Question

目前正尝试使用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')) ]) ]运行所以我不太关心它，直到我能在真实的服务器上真正测试它。这是另一个动画，特别是当我注意到它无法在我的移动设备上运行时：

ng-enter

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

提前感谢您的帮助！

更新（7.7.16）：好吧所以我决定回到它并且在弄乱了页面加载动画的时间之后它看起来确实有效。虽然我必须做一个大致diagnose(Disease):- retractall(symptom(_)), getSymptoms(List), forall(member(X,List),assertz(symptom(X))), disease(Disease). getSymptoms([Symptom|List]):- writeln('Enter Symptom:'), read(Symptom), dif(Symptom,stop), getSymptoms(List). getSymptoms([]). disease(flu):- symptom(fever), symptom(chills), symptom(nausea). disease(cold):- symptom(cough), symptom(runny_nose), symptom(sore_throat). disease(hungover):- symptom(head_ache), symptom(nausea), symptom(fatigue).的动画才能引起注意。这让我想到了在DOM完全加载之前动画开始执行的问题（或更多想法）。这看起来有点奇怪。仍在研究移动动画的情况。看起来我现在将在Github回购中提出一个问题，因为我已经把它弄得很糟糕，似乎无法让它发挥作用。此外，似乎没有任何提及不适用于NG2的移动动画。

更新（7.13.16）：看起来Angular2团队已经做了一些修复，计划用RC5发布，这应该解决我上面提到的问题。要回答我自己的问题并结束。

Answer 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在这方面）。

至于移动问题。我还在试图找出一种在移动设备上重新创建bug的方法（即 - 在plunker中），但到目前为止还没有成功。我的网站不是breaking问题，但我现在正在向前迈进。

Answer 2

Angular 2最终解决方案

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

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

2 个答案: