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

Question

I have a pending issue on the repo here , but I figured it would be useful to ask it here anyway.

I want to trigger an animation from within a Directive programmatically. When using Renderer.animate , I get:

Renderer.animate is no longer supported!

When using Renderer.invokeElementMethod , I get:

Cannot read property 'apply' of undefined

How would I do this?

Answer 1

Changes are coming to Angular! See this GitHub issue in the official Angular repo.

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