Just add an empty :enter animation to the view parent. In this case the initial child :enter animation will be disabled, but further animations will work. Template: <div @parent> <div @child>test</div> </dif> Animation: trigger(‘parent’, [ transition(‘:enter’, []) ]) trigger(‘child’, [ transition(‘:enter’, [ style({width: 0}), animate(250, style({width: ‘*’})), ]), ]) Here you can find more detailed … Read more
The question is actually more javascript animation vs css animation (because angular2’s animations are based on javascript-animation). The answer is that when you can – use CSS animation. Modern browsers uses different thread for CSS animation, so the javascript-thread is not affected by the CSS animations. You can use the HTML5 Animation Speed Test to … Read more
One possible way is to put animation trigger code in separate file and export it as const variable and use it in component as below. animations.ts import { trigger, state, style, transition, animate } from ‘@angular/core’; export const slideIn = trigger(‘slideIn’, [ state(‘*’, style({ transform: ‘translateX(100%)’, })), state(‘in’, style({ transform: ‘translateX(0)’, })), state(‘out’, style({ transform: … Read more