Animation

BeOne 2018. 7. 16. 19:00

■ Animation 사용

1. app.module.ts 위에 import 선언

 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

2. 해당 ts파일에 위에 import 선언

 import { trigger, state, transition, style, animate } from '@angular/animations';

3. animation 요소

animations: [
trigger('showDetailed', [
        state('summary', style({ height: '0px', display: 'none' })),
        state('detailed', style({ height: '250px', display: 'inherit' })),
        transition('summary <=> detailed', animate(250)),
]),
trigger('itemAnimation', [
            transition('* => *', [
                query(':enter', style({ opacity: 0}), { optional: true }),
                query(':enter', stagger('300ms', [
                    animate('1s ease-in', keyframes([
                        style({opacity: 0, transform: 'translateY(-75px)', offset: 0}),
                        style({opacity: .5, transform: 'translateY(35px)', offset: 0.3}),
                        style({opacity: 1, transform: 'translateY(0)', offset: 1})
                    ]))
                ]), { optional: true }),
                query(':leave', stagger('300ms', [
                    animate('1s ease-in', keyframes([
                        style({opacity: 1, transform: 'translateY(0)', offset: 0}),
                        style({opacity: .5, transform: 'translateY(35px)', offset: 0.3}),
                        style({opacity: 0, transform: 'translateY(-75px)', offset: 1})
                    ]))
                ]), { optional: true })
            ])
        ])
]