Animation

Notice

Recent Posts

Recent Comments

Link

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Tags more

Archives

Today

Total

관리 메뉴

I LOVE EJ

Animation 본문

Web publishing/PG_Angular

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 })
            ])
        ])
]