[4.0.0-rc.5] Animate programmatically

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Ways to animate apart from Component declarations don’t work.

Expected behavior

Run animations e.g. from within a Directive.

Minimal reproduction of the problem with instructions

As #13818 describes, there’s no invokeElementMethod available, so this is out of question. But I understand that Renderer will be removed anyway from the 4.0.0 release, so Renderer.animate(/*...*/) will also not be available.

Since there’s no way of adding animations to a Directive like you can with a Component declaration, is there any way to use animate to e.g. animate from within a Directive?

I currently get:

Renderer.animate is no longer supported!

Which is a clear message, sure, but I’m left in the dark as to how to make them work again. Any documentation would be nice 👍 , or please improve the Error message, as this breaks people’s app without offering alternative solutions.

What is the motivation / use case for changing the behavior?

We should be able to animate e.g. from within Directives.

Please tell us about your environment:

• VSCode

• Angular version: 2.0.X

4.0.0-rc.5

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

all

• Language: [all | TypeScript X.X | ES6/7 | ES5] TS

• Node (for AoT issues): node --version = 7.7.0

[CaerusKaru]

4.1 is here, but AnimationBuilder and other enhancements have been left out of the release. Is there a timeline for inclusion in the next release?

cc @matsko

[matsko]

So there’s annoying news and really good news.

What’s annoying: We can’t support renderer.animate() anymore because animations are totally decoupled from the framework with 4.0.0 and onwards. This means that programmatically generating raw keyframes and passing them into renderer.animate won’t work anymore.

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

This is effectively programmatic animations without the need to conform to the renderer API and web-animations.

If you really really really want to use this now then you can always import the undocumented class Animation (import {Animation as Animation} from "@angular/animations/browser";) and you can use the constructor and create methods to achieve this (https://github.com/angular/angular/blob/master/packages/animations/browser/src/dsl/animation.ts#L43). If you look at https://github.com/angular/angular/blob/master/packages/animations/browser/test/dsl/animation_spec.ts then you can get an idea of how to use this undocumented class. Once the beta arrives then please do use the new AnimationBuilder feature.