With Angular 4.1 it is now possible to create specific route animations. This is different from triggering an animation when a component is displayed because it will let you animate the entering/leaving component at the same time for a smooth transition, and let you modify the transition depending on which component is coming or going. … Read more
Now it’s possible. animations: [ trigger(‘flyInOut’, [ state(‘for’, style({ left: ‘{{left_indent}}’, // use interpolation }), {params: {left_indent: 0}}), // default parameters values required transition(‘* => for’, [ animate(2000, keyframes([ style({ opacity: 1, transform: ‘translateX(0)’, offset: 0 }), style({ opacity: 1, transform: ‘translateX(-300px)’, offset: 0.5 }), ])) ]), ]) ] UPDATE (according to SplitterAlex answer): in … Read more
update 4.1.0 Plunker See also https://github.com/angular/angular/blob/master/CHANGELOG.md#400-rc1-2017-02-24 update 2.1.0 Plunker For more details see Animations at angular.io import { trigger, style, animate, transition } from ‘@angular/animations’; @Component({ selector: ‘my-app’, animations: [ trigger( ‘enterAnimation’, [ 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: … Read more