[Animations] params not evaluated when transitioning to void state (e.g. ngIf :leave)

[michaelbromley]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request 

Current behavior

I want to animate an element which is being added and removed with *ngIf. I need to pass a parameter to the animation at run-time, which I am doing like this:

<!-- app.component.html -->
<div *ngIf="show" [@myTrigger]="triggerParams">
  Hello.
</div>

@Component({
  selector: 'my-app',
  templateUrl: `./app.component.html`,
  animations: [
    trigger('myTrigger', [
      state('*', style({ opacity: '{{ opacity }}' }), { params: { opacity: 0 } }),
      state('void',  style({ opacity: '{{ opacity }}' }), { params: { opacity: 0 } }),
      transition('void => *', animate('1000ms')),
      transition('* => void', animate('1000ms'))
    ]),
  ]
})
export class AppComponent {
  show = false;

  get triggerParams(): any {
    return {
      value: '',
      params: {
        opacity: this.show ? 1 : 0
      }
    };
  }
}

Currently, the triggerParams getter is being evaluated during the transition from void => *, but not the other way around, with the result that the div fades in, but does not fade out.

Expected behavior

I would expect the triggerParams getter to be evaluated also when the div transitions from * => void so that the param is set to { opacity: 0 } and it fades out.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/repro-for-20796?file=app/app.component.ts

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

So that I can animate *ngIf with dynamic params.

Environment

Angular version: 4.4.6, 5.0.5, 5.1.0-rc.1 (tested all 3)

Browser:
- [x] Chrome (desktop) version 62
 
For Tooling issues:
- Node version: 8.9.1
- Platform:  Windows 10

[YoungCatChen]

I tested with version 7.0.4 and hit this bug too. My repro:

https://stackblitz.com/edit/angular-ngif-animation-bug?file=src%2Fapp%2Fhello.component.ts

• Click [Set myEndLeftPx to 10] twice, and watch the Hello Angular text appearing, moving from 0 to 100 then from 100 to 10, then disappearing.
• Click [Set myEndLeftPx to 90] twice, and watch the text appearing, moving from 0 to 100 then from 100 to 90, then disappearing. Note the short distance on the second move.
• Click [Set myEndLeftPx to 10] then [Set myEndLeftPx to 90]. We expect it to move a short distance from 100 to 90, but it actually moves a long distance to 10. This is incorrect.

To compare, remove the *ngIf="myState" on the <h1> and do the above again. After clicking on [Set myEndLeftPx to 10] then [Set myEndLeftPx to 90], the text moves back to 90 correctly. That means this bug only occurs in the :leave transition in my case; it doesn't occur in the 1 => 0 transition.

[intellix]

Still an issue with 9: https://stackblitz.com/edit/repro-for-20796-ng9?file=src/app/app.component.ts