More than 5 years have passed since last update.

Angular Animationでrouterにはabsoluteをつける

Angular

Last updated at 2019-06-30Posted at 2019-06-29

Angularのrouterに対してanimationをつけるときには、position: absluteを指定しないと

translateなどが機能しない場合がある。

``` trigger('animation', [ transition('documents => document', [ query(':enter, :leave', [ style({ position: 'absolute' }) ]), query(':enter', [ style({ opacity: '0' }) ]), query(':leave', [ style({ transform: 'translateX(-)', transformOrigin: 'center' }) ]), group([ query(':leave', [ animate('500ms ease-out', style({ transform: 'scale(0, 0)', transformOrigin: 'center' })) ]), query(':enter', [ animate('500ms ease-out', style({ opacity: '1' })) ]) ]), ]), transition('document => documents', [ query(':enter, :leave', [ style({ position: 'absolute' }) ]), query(':enter', [ style({ opacity: '0' }) ]), query(':leave', [ style({ transform: 'scale(1, 1)', transformOrigin: 'center' }) ]), group([ query(':leave', [ animate('500ms ease-out', style({ transform: 'scale(0, 0)', transformOrigin: 'center' })) ]), query(':enter', [ animate('500ms ease-out', style({ opacity: '1' })) ]) ]), ]) ]); ```

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up