Angular2动画加载和页面转换

Question

目前正在尝试使用ng2的内置animations组件在我的Angular2站点中实现一些动画.到目前为止,我一直在研究Developer Guide - Animations文档中提供的Angular 2 .虽然我遇到了一些问题,但我希望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 问题可以解决这个问题以及Angular2回购票(在问题中由GünterZöchbauer评论中提到).有了这个,我很好奇是否有任何现有的解决方法？通过一些简短的研究,看起来似乎有可能曾经一次实施过,ng-enter而且ng-leave可以在他们的css中使用它,但从我可以看出这些已被逐步淘汰.仍然需要做更多的研究,所以我可能错了.

在此先感谢您的帮助!

更新(7.7.16):好吧所以我决定回到它并且在弄乱了页面加载动画的时间之后它看起来确实有效.虽然我必须做一个粗略的1000ms动画才能引起注意.这让我想到了在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()很棒的动画功能（更多内容可以在此处找到）这方面）。

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