This document summarizes how to get started with Angular animations. It discusses initializing an Angular project and installing the animations package. It also covers the basic concepts of triggers, states, styles, and transitions used to create animations. The document provides examples of binding animations to events, defining animation functions, grouping animations in parallel, querying animations, and using callbacks.

1. Angular
User Group Taiwan
Angular Animation 快 速 上 手
神腦國際 Senao International
前端工程師 Haru

2. Angular
User Group Taiwan
OUTLINE
• HTML5 + CSS3
• Start Angular Project
• Preset
• Trigger, State, Style, Transition
• Event Binding
• Function – Animation
• Group(parallel), UseAnimation, Query
• Callback

3. Angular
User Group Taiwan
HTML5 + CSS3
• View Code

4. Angular
User Group Taiwan
Start Angular Project
• New Project
• ng new PROJECT_NAME
• 靜態頁面 à Ng Project
• images à [ src / assets ]（全域） 新建 [ images ] 目錄
• head à src / index.html
• body à src / app / app.component.html
• css file à src / app / app.component.css

5. Angular
User Group Taiwan
Preset
• Install Animation Package
• npm install @angular/animations - - save
• [app] - app.module.ts

6. Angular
User Group Taiwan
Trigger, State, Style, Transition (官網範例)

7. Angular
User Group Taiwan
Event Binding
• app.component.html
• app.component.ts

8. Angular
User Group Taiwan
Function – Animation
少了 infinite

9. Angular
User Group Taiwan
Group(parallel), UseAnimation, Query

10. Angular
User Group Taiwan
Callback
• Button “Run Once”: stop - run
• Button “Stop”: run - stop

11. Angular
User Group Taiwan
END
Thank You :)