angular 4: animate component selector

Question

I am using tabs in my application whose contents are shown using *ngIf.

I want to animate the entry and exit of these contents. Example: plunker

Seems like animation :enter and :leave doesnt work on component selector Example: plunker

  template: `
<div>
  <h2>Hello {{name}}</h2>
  <button (click)="show = !show">togle show ({{show}})</button>
  <my-child *ngIf="show" [@myAnimation]></my-child>
</div>
 `,


trigger(
  'myAnimation',
  [
    transition(
    ':enter', [
      style({transform: 'translateX(100%)', opacity: 0}),
      animate('500ms', style({transform: 'translateX(0)', 'opacity': 1}))
    ]
  ),
  transition(
    ':leave', [
      style({transform: 'translateX(0)', 'opacity': 1}),
      animate('500ms', style({transform: 'translateX(100%)', 'opacity': 0}),

    ]
  )]
)

I tried moving the animation to the child component but there, the ngIF removes the element before the animation could happen.

Answer 1

It's a bit too much code for what you are trying to achieve. You can use state to define the enter and leave state ( * and void ). And animate between those.

The issue could also be that you are using [@myAnimation] without an assignment. If you do not bind it to anything, you should/could remove the brackets, but not sure of this. Try this:

@Component({
    template: `<my-child *ngIf="show" @myAnimation></my-child>`,
    animations: [
      trigger('myAnimation', [
        state('void', style({transform: 'translateX(100%)', opacity: 0})),
        state('*', style({transform: 'translateX(0)', opacity: 1})),
        transition(':enter, :leave', animate(500))
      ])
    ]
})

plunkr