Angular 4 - 如何在指令内部运行动画？

Question

我在这个仓库here上有一个未决问题，但我想在这里询问也会很有用。

我想从指令中编程触发动画。 当使用Renderer.animate时，我会遇到以下错误：

Renderer.animate is no longer supported!

当我使用Renderer.invokeElementMethod时，我会得到以下结果：

Cannot read property 'apply' of undefined

我该如何做到这一点？

- Nicky

---

根据引用问题中的评论，看起来您应该实现自己的渲染器或者只使用 ElementRef.nativeElement。我会根据目标环境选择后者。顺便说一下，为 JavaScript 打标签点赞。 - Aluan Haddad

谢谢，我明白了。我只是觉得很奇怪，在 @angular/animations 下似乎有一个完整的动画引擎，但我显然无法利用它。我会继续寻找合适的解决方案。 - Nicky

Answer 1

对于Angular来说，一些改变即将到来！请查看官方Angular存储库中的此GitHub问题。

简明扼要

真正的好处是：在第一个beta版Angular 4.1中（作为本周4.0.0的后续版本发布），您可以执行以下操作：

class MyCmp {


constructor(private _builder: AnimationBuilder) {
   }
   myMethod() {
      const animation = this._builder.build([
        style(...),
        animate(...),
        group([
          animate(...)
          animate(...)
          animate(...)
        ])
      ]);
      const player = animation.create(someElement);
      player.play();
   }
}

- Nicky