How to animate child components in angular 2?

Question

I tried to add animation to the parent component, so when the child components: enter or: leave, will show the sliding effect. 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 an animation selector to the child component in the template as follows:

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

Animation does not work. Then I add the animation code inside each component and add @stepAnimation to the parent tag of each template. This way I get input animation, but I won’t leave. I suppose due to ngIf for the parent, but regardless, there is a lot of re-animation code with this. Would it still handle the animation at the parent level?

Answer 1

The problem is that the custom <start> , <family> and <about> elements have no style and therefore the default display is inline , which cannot be translated. Just add this to your parent stylesheet:

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

And it should work.