How to animate child components in angular 2?

Question

I tried to add animation on the parent component so when child components :enter or :leave, a sliding effect would show. Here is my parent @component:

  @component({
   selector: 'plan',
   templateUrl: '../templates/plan.tpl.html',
   styleUrls: ['../../../../assets/css/plan.scss'],
   animations: [
     trigger('stepAnimation', [
       transition(':enter', [
         style({transform: 'translateX(100%)'}),
         animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
       ]),
    transition(':leave', [  // before 2.1: transition('* => void', [
      style({transform: 'translateX(0%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}))
    ])
  ])]

})

Then I added the animation selector to the child component in the template as follow:

<start *ngIf="currentPage == 'start'" @stepAnimation></start>
<about *ngIf="currentPage == 'about'" @stepAnimation></about>
<family *ngIf="currentPage == 'family'" @stepAnimation></family>

The animation doesn't work. Then I add the animation code inside each component and add @stepAnimation to the parent tag of each template. This way, I get the enter animation but not leave. I guess that's because of the ngIf on the parent but regardless, there are a lot of repeat animation code with this. Would there be anyway to handle the animation on the parent level?

Answer 1

The problem is that the custom elements, <start>, <family>, and <about> have no styling and therefore display defaults to inline, which can't be translated. Simply add this to your parent stylesheet:

about, start, family {
    display: block;
    /*Any other layout code, e.g. position:absolute */
}

And it should work.