Angular 4 - 如何从 Directive 中运行动画？

Question

我在回购 here 上有一个未决问题，但我认为无论如何在这里提问都会很有用。

我想以编程方式从指令中触发动画。使用 Renderer.animate 时，我得到：

Renderer.animate is no longer supported!

当使用 Renderer.invokeElementMethod 时，我得到：

Cannot read property 'apply' of undefined

我该怎么做？

Answer 1

Angular 即将发生变化！请参阅官方 Angular 存储库中的 this GitHub issue。

TL;DR

What's really good: With the first beta of angular 4.1 (which comes out as the follow-up release to this weeks 4.0.0) you can do the following:

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();
   }
}

Angular 4 - 如何从 Directive 中运行动画？

Angular 4 - How to run animation from within Directive?

javascript

typescript

angular4

angular

Angular 4 - 如何从 Directive 中 运行 动画？

Angular 4 - How to run animation from within Directive?

javascript

typescript

angular4

angular

Angular 4 - 如何从 Directive 中运行动画？