Feature Request: Allow binding expression in style(), keyframes() etc...

[shlomiassaf]

I'm submitting a ... (check one with "x")
feature request

Current behavior
Animation instructions doesn't accept bindings expression.

Expected/desired behavior
Animation metadata should allow instructions from the component instance.

Example:

@Component({
  selector: 'my-app',
  animations: [
    trigger('fade', [
      transition('void => in', [
        animate('150ms linear', keyframes([
          style('MY_STYLE'),
          style({opacity: '*'})
        ]))
      ])
    ])
  ],
  encapsulation: ViewEncapsulation.None,
  template: `<div  @fade="fadeState"></div>`})
export class FadeInBackdrop {
  private fadeState: 'in' | 'out' = 'in';
  MY_STYLE = {
    opacity: 0
  }
}

What is the motivation / use case for changing the behavior?
This will allow dynamic animation based on user input.
Sine animation instructions are static the only way to change them in runtime is
A) Using auto style, letting the user set * from css
B) Define multiple states (not really dynamic)

This is really useful in 3rd part libraries where some sort of animation customization is needed.

Since the generated animation factory runs on every change it can get a hold of the instance and easily get the value.
The syntax for referencing a bind needs definition as style might be a string.

[matsko]

We have an API in mind for this actually:

@Component({
  animations: [
    trigger('fade', [
       transition('in <=> out', [
          animate(1000, style('$myStyle'))
       ])
    ])
  ],
  template: `
    <div @fade="fadeState"></div>
  `
})
export class FadeInBackdrop {
  public currentFadeState = 'in';
  private fadeStateValues = {
     in: {
       value: 'in',
       data: { 'myStyle': { opacity: 1 } }
     },
     out: {
       value: 'out',
       data: { 'myStyle': { opacity: 0 } }
     }
  }

  get fadeState() {
    return this.fadeStateValues[this.currentFadeState];
  }
}

[shlomiassaf]

👍

Took me some time to get this

why the value property in the state interface? I don't see it used.

As far as I understand this the data property is the actual context which we bind to it's properties with $

[matsko]

It's the value of the state:

<div @fadeState="stateVal"></div>

// string-based value
stateVal = 'in';

// is the same as
stateVal = { value: 'in', data { ... }};

[shlomiassaf]

I can see angular 3rd party animation implementation libraries coming after this lands :)

[matsko]

3rd party tools will use this API:

animations: [
   animation('3rdPartyAnimation', [
      style('$value'),
      animate('$duration', { prop: '$value2' })
   ]),

   trigger('something', [
      transition('* => *', animation('3rdPartyAnimation'))
   ])
]

[dpix]

Any Idea on which release candidate this will make it into? I've just upgraded to RC4 to check out animations but I still need to calculate values for an animation at run-time. Unless there is some way to do this currently?

eg:

 animations: [
        trigger('slide', [
            state('0', style({'margin-left': someCalculatedValueOrFunction })), ...

[matsko]

Yes we do have an API in mind for this. But getting some of the core bugs out of the way for final is a higher priority. Once the CSS Parser integration and query support are in then this will get in (hopefully in the coming weeks).

The API for this will be:

// register in bootstrap
function myCalculationFn(element, styles, prop, args) {
   return calculatedPropValue;
}

bootstrap(App, [
   provide(ANIMATION_HELPERS, { multi: true, useValue: myCalculationFn })
])

// in your component
animations: [
        trigger('slide', [
            state('0', style({'margin-left': 'myCalculateFn()' })),

[dharders]

The new API looks very useful @matsko . Quick question: Does the Angular (or web animation) Framework enable a snapshot of current styles applied at the time of state change ? i.e. So we can pass that value to myCalculateFn() and animate back to the state value from the current in flight animation to avoid jarring (i.e. Greensock GSAP TweenMax.to() functionality). Related issue #9661

[matsko]

Yes there is something in mind for an :initial or :start CSS object. The API is still being figured out.

[dharders]

Great. Looking forward to it!