Angular Styling & Animations (for Angular 2+)

Tạo kiểu và hiệu ứng động trong Angular (cho Angular 2+)

Dành cho Angular 2+: Học cách sử dụng kiểu động và hiệu ứng chuyển động mạnh mẽ để tạo ra các ứng dụng Angular đẹp mắt

4.5

(2,043 đánh giá)

15,452 học viên

Giảng viên

Maximilian Schwarzmüller

Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao

50.000đ 469.000đ -89%

✓ Xem giỏ hàng và thanh toán

Bao gồm phụ đề tiếng Việt, tiếng Anh

7.0 giờ video

126 bài giảng

Truy cập vĩnh viễn

Học trên mọi thiết bị

Cập nhật: 30/05/2026

#Angular #Css Animations #Frontend Frameworks #Web Development

Bạn sẽ học được gì

Kết thúc khóa học, học viên sẽ có thể sử dụng nhiều tính năng của Angular để tạo kiểu và hiệu ứng động cho ứng dụng

Học viên sẽ có thể tạo kiểu cho các component Angular, các phần tử trong component và thay đổi kiểu đó một cách linh hoạt

Học viên sẽ có thể thêm các hiệu ứng phức tạp, ví dụ như tạo hiệu ứng xuất hiện cho phần tử, danh sách hoặc khi chuyển route

Yêu cầu

Yêu cầu kiến thức cơ bản về Angular (2 hoặc 4)

Yêu cầu kiến thức cơ bản về CSS

Biết cơ bản về CSS Transitions & Animations là một lợi thế

Không yêu cầu kiến thức trước về Angular Animations

Đối tượng phù hợp

Khóa học này dành cho tất cả những ai muốn nâng cao trải nghiệm người dùng bằng cách thêm kiểu dáng và hiệu ứng đẹp mắt với sự hỗ trợ của Angular

Những học viên quan tâm đến việc tạo kiểu hoặc hiệu ứng động cho ứng dụng Angular sẽ thấy khóa học này rất hữu ích

Nội dung khóa học

7 phần • 125 bài giảng

1 Giới thiệu

2 Tham gia cộng đồng học trực tuyến của chúng tôi

3 Hiểu về các yêu cầu tiên quyết

4 Quan trọng: Tạo dự án với Angular CLI

5 Tạo dự án (Thiết lập khóa học)

6 Dự án đầu tiên của chúng ta

7 Cấu trúc khóa học

8 Cách tận dụng tối đa khóa học này

1 Giới thiệu module

2 Thêm kiểu toàn cục cho ứng dụng

3 Thực hành: Kiểu toàn cục cho ứng dụng

4 Thêm CSS Frameworks hoặc kiểu bên ngoài vào ứng dụng

5 Cách thêm kiểu toàn cục trong dự án CLI

6 Cách sử dụng NPM để cài đặt CSS Frameworks

7 Hiểu về kiểu phạm vi component

8 Sử dụng kiểu phạm vi component

9 Sử dụng kiểu nội tuyến trong component

10 Sử dụng thẻ <style> trong template component

11 Lý thuyết đằng sau View Encapsulation của Angular

12 Cách Angular mô phỏng Shadow DOM

13 Thay đổi hành vi View Encapsulation

14 Sử dụng Shadow DOM gốc

15 Cách tắt View Encapsulation

16 Bộ chọn CSS đặc biệt: :host

17 Sử dụng dạng hàm của :host

18 Tạo kiểu component bằng cách sử dụng selector của chúng

19 Bộ chọn CSS đặc biệt: :host-context

20 Bộ chọn CSS đặc biệt: /deep/

21 Hiểu cú pháp ngClass

22 Sử dụng ngClass để thêm CSS class động

23 Hiểu cú pháp ngStyle

24 Sử dụng ngStyle để điều chỉnh kiểu CSS động

25 ngStyle: camelCase so với 'tên thực'

26 Sử dụng Angular Renderer để điều chỉnh kiểu CSS

27 Dự án: Giới thiệu dự án khóa học

28 Dự án: Thêm kiểu Bootstrap (CSS Framework)

29 Dự án: Lên kế hoạch các bước tiếp theo

30 Dự án: Thêm margin (phạm vi component)

31 Dự án: Tạo kiểu các mục trong danh sách

32 Dự án: Đánh dấu mục động

33 Dự án: Thử thách - Tạo kiểu cho thay đổi trạng thái

34 Dự án: Hãy tạo kiểu cho nhãn trạng thái

35 Dự án: Tạo kiểu cho mục không hoạt động & hoàn thiện

1 Giới thiệu module

2 Hiểu thuộc tính CSS Transition

3 Sử dụng thuộc tính Transition để thêm hiệu ứng chuyển tiếp

4 Tìm hiểu thêm về thuộc tính CSS Transition & Timing Functions

5 Cấu hình nhiều hiệu ứng chuyển tiếp

6 Hiểu thuộc tính CSS Animation

7 Tìm hiểu thêm về thuộc tính CSS Animation

8 Sử dụng thuộc tính Animation để thêm hiệu ứng

9 Dự án: Thử thách của bạn!

10 Dự án: Triển khai thanh tải có hiệu ứng

11 Dự án: Chuyển màu viền

12 Dự án: Tạo hiệu ứng cho việc chọn ("đánh dấu") mục danh sách

13 So sánh: Transitions vs Animations vs Angular Animations

1 Muốn sử dụng Angular 2 thay vì Angular 4?

2 Giới thiệu module

3 Cách hoạt động của Animations trong Angular

4 Hỗ trợ trình duyệt & Polyfills

5 Mở khóa Animations với module phù hợp

6 Bắt đầu với Triggers và States

7 Thuộc tính nào có thể tạo hiệu ứng?

8 Gán Triggers cho phần tử trong template

9 Chuyển đổi trạng thái Trigger động

10 Thêm Transitions giữa các States

11 Sử dụng nhiều Transitions

12 Xây dựng Triggers phức tạp hơn với nhiều States

13 Cấu hình Transitions tinh tế khi sử dụng nhiều States

14 Hiểu tính tái sử dụng của Triggers

15 Sử dụng nhiều Triggers

16 Tạo Transitions nhiều bước

17 Transitions nhiều bước và kiểu tạm thời

18 Một lỗi trong Angular 4 Animations

19 Tạo kiểu States và Animations chính xác

20 So sánh: CSS Animations vs Angular Animations

21 Tách riêng Animations

22 Dự án: Thử thách của bạn!

23 Dự án: Thiết lập Animations

24 Dự án: Thêm Triggers và States

25 Dự án: Thêm Transitions

26 Dự án: Sử dụng Transitions nhiều bước

27 Dự án: Dọn dẹp một số CSS

28 Dự án: Sử dụng kiểu tạm thời trong Transitions

1 Giới thiệu module

2 Các hiệu ứng chúng ta chưa thể tạo cho đến nay

3 Sử dụng trạng thái "void" trong Transitions

4 Sử dụng trạng thái ký tự đại diện "*" trong Transitions

5 Sử dụng thuộc tính kích thước động

6 Tạo hiệu ứng cho danh sách

7 Sử dụng Animation Groups cho hiệu ứng song song

8 Hiểu Timing Functions (ease-in, v.v.)

9 Kiểm soát mọi thứ với Animation Keyframes

10 So sánh: Multi-Step Transitions vs Animation Groups vs Keyframes

11 Phản ứng với sự kiện Animation

12 Tổng kết đầu tiên

13 Dự án: Các bước tiếp theo & Thử thách của bạn

14 Dự án: Thêm hiệu ứng danh sách cơ bản

15 Dự án: Tạo hiệu ứng danh sách tốt hơn với Keyframes

16 Dự án: Tạo danh sách có hiệu ứng so le

17 Dự án: Trượt các phần tử

18 Dự án: Trượt các mục danh sách

19 Dự án: Đồng bộ hóa hiệu ứng

20 Dự án: Tạo hiệu ứng cho nút bấm dựa trên tính hợp lệ của biểu mẫu

21 Cách tạo hiệu ứng cho Routing

22 Dự án: Tạo hiệu ứng route cơ bản (Mờ vào-ra)

23 Dự án: Nâng cao: Hiệu ứng route trượt xuống

24 Tổng kết dự án

1 Giới thiệu module

2 Sử dụng phương thức query() mới

3 Tìm hiểu thêm về query()

4 Bộ chọn đặc biệt cho query()

5 Tất cả bộ chọn đặc biệt & tài liệu đầy đủ về query()

6 Tùy chọn query()

7 Kết hợp bộ chọn query()

8 Thêm Query vào dự án khóa học

9 Sửa lỗi nhỏ với query() và dự án khóa học

10 Tạo hiệu ứng so le dễ dàng với stagger()

11 Tạo Animations có thể tái sử dụng

12 Tạo và chạy Animations theo chương trình

13 Cải thiện hiệu ứng route

14 Một vấn đề với hiệu ứng route

15 Tổng kết

1 Tổng kết khóa học

2 Quà tặng: Thêm nội dung!

Giới thiệu khóa học

You finished the business logic of your web page and you're done, right? No! Adding fitting styles and animations to a web page significantly improves the user experience!

It's more than a little bonus - animations and styles help the user understand the flow of your page, pass on feedback to the user and overall improve the usability of your page.

This course teaches you which tools Angular gives you to dynamically style and animate your web page. This is not a CSS basics course - this course will really dive into the rich toolset Angular ships with, allowing you to build a reactive, user-friendly web application.

Just think about your favorite web apps: How many of these look ugly, seem to be styled randomly (and statically) and use no animations? Probably not that many - time to join the club of developers creating awesome user experiences!

This is what you'll learn!

How Angular helps you with styling and animating your web page
What "dynamic" styling and animating means
How you may either style the whole web app or individual components you built
Which tools Angular offers you to adjust styles at runtime
How you can use vanilla CSS to build nice transitions and animations
All about Angular's Animation package: Building, configuring and using triggers, states, styles, transitions and more!
Advanced Animation features like Animation groups, keyframes or callbacks
How to animate the appearance and removal of elements/ components
How to animate lists
How to animate routing
And more!

This is what the course offers - but is this course for you?

This course is for you if:

You got (basic) Angular and CSS knowledge and feel like you need to learn more about adding/ using styles and animations in your Angular apps
You're learning Angular right now and you want to continue learning with more beautiful apps
You even already know the basics about styling and animating Angular apps but you feel like there still is some mystery regarding the styling/ animation of components

I'd be very happy to welcome you in this course!