Tiếp tục với bài tập hoạt hình của chúng tôi từ phần trước.
Chúng tôi sẽ thêm vào một số hình ảnh động hơn để ứng dụng góc cạnh của chúng tôi.
Đặc biệt, chúng tôi sẽ thêm vào một hình ảnh động sẽ được kích hoạt
khi các thay đổi tuyến đường xảy ra trong ứng dụng đơn trang của chúng tôi.
Chúng tôi cũng sẽ thêm vào một hình ảnh động cho phép
một chế độ xem được hiển thị khi dữ liệu được lấy từ phía máy chủ,
vì vậy khi bạn đang loại bỏ các spinner trong chế độ xem của bạn và sau đó render chế độ xem,
chúng tôi muốn chế độ xem được chiếu lên màn hình
chứ không chỉ đơn giản là chỉ xuất hiện tất cả các đột ngột.
Vì vậy, một vài hình ảnh động mới mà chúng ta sẽ thêm vào trong bài tập này.
Trên đường đi khi bạn có nhiều hình ảnh động trong ứng dụng của bạn,
nó có thể là tốt hơn để cấu trúc lại mã theo một cách mà là
quản lý hơn chứ không phải là bao gồm piecemeal
mỗi chút của một kích hoạt vào mỗi tập tin
trong các thành phần của chúng tôi ứng dụng góc cạnh của chúng tôi.
Vì vậy, chúng ta hãy thực hiện tất cả các bước này như là phần hai của bài tập hoạt hình.
Điều đầu tiên mà tôi sẽ làm là chúng tôi sẽ cấu trúc lại
mã mà chúng tôi đã thực hiện như là một phần của bài tập hình ảnh động này.
Cách tiếp cận mà tôi đang minh họa cho các bạn ở đây chỉ là cách tiếp cận được đề xuất của tôi.
Bạn không nhất thiết phải làm theo chính xác theo cách này,
nhưng tôi cảm thấy rằng điều này giúp tổ chức mã tốt hơn nhiều.
Vì vậy, những gì tôi sẽ làm là giống như chúng tôi đã có một thư mục riêng biệt cho các dịch vụ,
chúng tôi đã có một thư mục riêng biệt cho các tài nguyên được chia sẻ và như vậy,
tôi sẽ tạo ra một thư mục mới có tên là hình ảnh động.
Chúng tôi sẽ lưu trữ tất cả các mã hoạt hình liên quan đến đó và sau đó sử dụng nó bằng cách nhập khẩu nó
bất cứ nơi nào cần thiết trong các thành phần của chúng tôi trong ứng dụng góc cạnh của chúng tôi.
Vì vậy, đi đến mã của chúng tôi,
trong thư mục ứng dụng tôi sẽ tạo ra một thư mục mới và đặt tên cho nó Hình động.
Bên trong thư mục Animations này,
tôi sẽ tạo ra một tập tin mới và cho thiếu một từ tốt hơn tôi
sẽ gọi nó là tập tin app.animation.ts.
Sau đó, bên trong này, tôi sẽ nhập khẩu
các lớp khác nhau từ hình ảnh động góc mà tôi đã làm trong thành phần DishDetail.
Vì vậy, đi đến thành phần DishDetail,
bạn sẽ nhớ lại rằng điều đầu tiên mà tôi
đã làm là tôi thêm dòng này vào thành phần DishDetail.
Tôi sẽ cắt nó ra khỏi thành phần DishDetail và
thay vào đó dán nó vào các hình ảnh động ứng dụng,
do đó bất cứ nơi nào ứng dụng này hình ảnh động được
bao gồm bằng cách nhập khẩu nó vào các thành phần khác của chúng tôi,
điều này sẽ tự động đến cho đúng ở đó.
Bây giờ, trong hình ảnh động ứng dụng này,
tôi sẽ tạo ra một số chức năng nhà máy sẽ xuất khẩu các trigger khác nhau.
Chức năng nhà máy đầu tiên mà tôi sẽ tạo ra
chức năng xuất khẩu này và gọi nó là khả năng hiển thị.
Chức năng hiển thị này sẽ trả về mã
tương ứng với kích hoạt mà chúng tôi đã thực hiện trong thành phần DishDetail.
Vì vậy, quay trở lại thành phần DishDetail,
tôi chỉ sẽ cắt ra toàn bộ mã này cho kích hoạt từ đây và sau đó quay trở lại
ứng dụng animation.t tập tin và sau đó dán nó vào
vị trí ngay tại đó trong chức năng ở đây.
Điều này bây giờ trở thành một chức năng có sẵn để nhập khẩu từ thành phần DishDetail của tôi.
Vì vậy, quay trở lại thành phần DishDetail.
Bây giờ, ở vị trí mà tôi nhập khẩu kích hoạt và các lớp học khác,
tôi sẽ bây giờ nhập khẩu tầm nhìn
từ ứng dụng hoạt hình, hoạt hình,
và do đó chức năng đó bây giờ sẽ trở nên có sẵn cho tôi trong mã của tôi ở đây.
Vì vậy, một khi tôi làm điều đó bên trong hình ảnh động của
tôi, tôi chỉ có thể gọi chức năng đó để tôi có thể nói
khả năng hiển thị và sau đó mã kích hoạt bây giờ trở thành một phần của thành phần của tôi ở đây.
Bây giờ, điều này tôi tìm thấy là một cách tốt hơn để tổ chức mã cho hình ảnh động của tôi.
Bây giờ, nếu tôi cần sử dụng cùng một kích hoạt trong một thành phần khác,
tôi chỉ có thể làm theo cách tiếp cận này để bao gồm nó vào các thành phần khác của tôi là tốt.
Hãy lưu các thay đổi và sau đó đi và
xem nhanh ứng dụng của chúng tôi trong trình duyệt.
Đi vào trình duyệt, bạn thấy rằng khi tôi đi đến thành phần đĩa, thành
phần đĩa là ngay ở đó và sau đó
nó sẽ có hành vi hoạt hình tương tự như trước đây.
Vì vậy, bằng cách refactoring mã,
tôi đã quản lý để có được mã tổ chức tốt hơn và
vẫn làm việc chính xác giống như một phần của bài tập này.
Nếu bạn chỉ có một hoạt hình duy nhất được sử dụng ở một nơi duy nhất,
sau đó phương pháp tiếp cận trước đó hoạt động tốt nhưng nếu bạn có
nhiều và đặc biệt là nếu bạn đang sử dụng lại mã trong nhiều thành phần,
sau đó cách tiếp cận refactored này là một cách tốt hơn nhiều để thực hiện các giải pháp.
Các bản cập nhật tiếp theo mà tôi sẽ làm là để thêm hình ảnh động trên tuyến đường thay đổi.
Vì vậy, khi tôi đi từ một chế độ xem khác, vì vậy, ví dụ,
từ nhà đến khoảng hoặc sắp đến menu hoặc menu để liên hệ hoặc ngược lại,
sau đó tôi muốn có thể hoạt hình những thay đổi này trong ứng dụng của tôi.
Vì vậy, để làm điều đó,
tôi sẽ giới thiệu một chức năng khác vào các ứng dụng animation.t tập tin.
Vì vậy, đi vào các ứng dụng animation.t tập tin,
tôi sẽ xuất khẩu một chức năng mà tôi gọi là FlyInout,
bạn sẽ thấy lý do tại sao tôi sử dụng tên này ở đây.
Sau đó, điều này sẽ trả về một chức năng mà là một kích hoạt với tên FlyInout.
Vì vậy, bên trong là kích hoạt,
tôi sẽ xác định mã cho những gì kích hoạt này sẽ làm.
Vì vậy, ở đây, tôi sẽ xác định một trạng thái ở đây với tên ngôi sao,
vì vậy nó không quan trọng trạng thái đó là gì,
điều này được áp dụng cho bất kỳ trạng thái và sau đó tôi sẽ xác định
một số phong cách ở đây và hai phong cách mà tôi
sẽ xác định là mờ là một
và biến đổi là TranslaTeX (0),
do đó có nghĩa là nó ở vị trí bình thường của nó trong trường hợp này.
Bây giờ, khi tôi định nghĩa chuyển tiếp,
tôi cũng có thể định nghĩa chuyển tiếp theo cách này.
Vì vậy, nếu tôi nói nhập chuyển tiếp,
chuyển tiếp nhập là một chữ viết tắt cho nói đi từ
trạng thái vô hiệu đến một trong những trạng thái hiện có.
Vì vậy, có nghĩa là quan điểm đang đi vào ứng dụng của tôi.
Vì vậy, nhập, có nghĩa là bây giờ khi tôi định tuyến vào
một chế độ xem cụ thể trong ứng dụng trang duy nhất của tôi,
chế độ xem đó sẽ được nhập vào chế độ xem.
Vì vậy, đó là lý do tại sao tôi có thể áp dụng dấu hai chấm nhập chuyển tiếp trong trường hợp đó.
Bây giờ tương tự, có một quá trình chuyển đổi được gọi là dấu hai chấm
để lại mà tôi có thể áp dụng khi bạn chuyển ra khỏi
chế độ xem này và sau đó bạn đang lấy cái nhìn ra từ ổ cắm router của ứng dụng của bạn.
Vì vậy, chúng tôi sẽ làm cả hai vào và một trong đó là để lại.
Vì vậy, hai chức năng mà tôi sẽ xác định ở đây,
chuyển tiếp nhập và chuyển tiếp rời khỏi đây.
Vì vậy, đối với nhập,
tôi muốn xác định những gì?
Để nhập, hãy để tôi xác định các chức năng ở đây,
và tương tự như vậy, để lại cũng,
tôi sẽ xác định các chức năng ở đây.
Vì vậy, tạo ra cái giàn giáo này ở đây.
Bây giờ, tôi có thể nhập thông tin mà tôi muốn trong những quá trình chuyển đổi này.
Vì vậy, khi quá trình chuyển đổi này xảy ra,
tôi sẽ bắt đầu với một phong cách biến đổi,
TransLaTeX trừ đi 100 phần trăm
, có nghĩa là quan điểm hoàn toàn ra khỏi quan điểm ở đây.
Vì vậy, bạn bắt đầu từ đó từ âm 100 phần trăm tại thời điểm này.
Vì vậy, khi bạn đang bước vào,
bạn sẽ bắt đầu với điều đó,
và sau đó cũng vào thời điểm này,
tôi sẽ hoạt hình, và hoạt hình trong 500.
Vì vậy, khi tôi chỉ định 500 như thế này,
bạn thậm chí có thể làm theo cách này.
Cách khác, bạn có thể nói, trong dấu ngoặc kép,
“500ms”, và sau đó bạn thậm chí có thể sử dụng dễ dàng hoặc dễ dàng.
Vì vậy, hãy để tôi sửa đổi điều này thành
500ms dễ dàng trong bởi vì quan điểm này đang đến.
Vì vậy, chúng tôi sẽ dễ dàng trong quan điểm.
Vì vậy, để nghỉ phép, tôi sẽ áp dụng quá trình chuyển đổi như animate,
và sau đó tôi sẽ nói 500 mili giây, một lần nữa, ease-out.
Vì vậy, quan điểm này đang rời đi.
Vì vậy, chúng tôi muốn giải phóng tầm nhìn đó.
Sau đó, trong trường hợp này,
phong cách mà tôi áp dụng
là biến đổi,
TransLaTeX 100%.
Vì vậy, chế độ xem này sẽ hoàn toàn biến mất khỏi màn hình ở đó.
TranslaTeX 100 phần trăm.
Ngoài ra, tôi sẽ đặt độ mờ bằng không.
Vì vậy, hoàn toàn biến mất khỏi màn hình.
Vì vậy, hoạt hình này sẽ thêm vào một tính năng mới tốt ở đây.
Bây giờ, với cái này,
tôi có thể thêm vào, bắt đầu với độ mờ bằng 0, nếu bạn thích.
Hãy thêm vào đó và xem nó trông như thế nào.
Vì vậy, đây là kích hoạt FlyInout mà tôi đã định nghĩa ở đây.
Bây giờ, bạn đang rõ ràng tự hỏi,
làm thế nào để tôi sử dụng FlyInout này và sau đó áp dụng
điều này để định tuyến chuyển tiếp trong ứng dụng của tôi?
Vì vậy, để làm điều đó, chúng ta sẽ đi đến, trước tiên,
bắt đầu với thành phần trình đơn tệp.s.
Tôi sẽ nhập
FlyInout
từ hoạt hình ứng dụng.
Sau đó, đi đến thành phần,
bây giờ tôi sẽ giới thiệu một tài sản mới được gọi là host.
Tôi sẽ cho bạn biết những gì đi vào máy chủ trong một thời gian ngắn.
Sau đó, chúng tôi cũng sẽ bao gồm các động sản,
mà là một mảng ở đây.
Sau đó, bên trong đây, tôi sẽ sử dụng FlyInout mà chúng tôi vừa nhập khẩu.
Vì vậy, kích hoạt hoạt hình này sẽ được áp dụng cho thành phần phương tiện này.
Bây giờ, trong máy chủ,
vì vậy đây là cách tôi đảm bảo rằng hình ảnh động đặc biệt này xảy ra khi thay đổi tuyến đường xảy ra.
Vì vậy, trong máy chủ này ở đây,
tôi cung cấp điều này như nói,
@flyInOut và nói đúng,
và điều này nên được kèm theo trong dấu ngoặc kép cũng,
@flyInOut, đúng, và sau đó phong cách,
hiển thị khối.
Vì vậy, hai điều này nên được áp dụng bên trong tài sản máy chủ ở đây.
Bây giờ, khi chúng tôi làm điều này, thành phần menu của tôi bây giờ sẽ bắt đầu hoạt hình
khi tôi định tuyến vào thành phần menu,
và sau đó cũng khi tôi rời khỏi thành phần menu.
Bây giờ, tôi sẽ áp dụng điều tương tự cho các thành phần còn lại của ứng dụng Angular của tôi.
Vì vậy, những gì tôi sẽ làm là,
tôi sẽ chỉ sao chép này,
và sau đó chúng tôi sẽ áp dụng điều này cho các thành phần về.
Vì vậy, tôi sẽ đi đến thành phần về.
Trong trang trí thành phần,
tôi đã bao gồm các thông tin ở đây,
và bạn thấy dòng squiggly màu đỏ nhắc nhở tôi rằng tôi cần phải nhập khẩu
FlyInout từ hình ảnh động, ứng dụng hoạt hình.
Vì vậy, cách tiếp cận tương tự, về thành phần,
sau đó trong thành phần tiếp xúc cũng, cùng một điều,
và sau đó áp dụng các thuộc tính máy chủ và hoạt hình cho trang trí thành phần,
và sau đó những gì khác chúng ta có?
Thành phần nhà. Hãy đi đến thành phần nhà và lặp lại cùng một điều ở đây.
Tôi sẽ thêm vào máy chủ và tài sản hình ảnh động,
và sau đó đi trước và nhập
FlyInout, từ hoạt hình ứng dụng.
Chúng ta có bỏ lỡ gì không? Oh, chúng ta cũng cần phải cập nhật thành phần chi tiết món ăn.
Vì vậy, để tôi đi đến thành phần chi tiết món ăn.
Vì chúng ta đã có khả năng hiển thị ở đó,
tôi chỉ cần nhập FlyInout.
Sau đó, kể từ khi chúng tôi đã thiết lập các phần còn lại ở đây,
tôi sẽ đi vào và dán mã đó,
và rõ ràng, tôi có hai hình ảnh động ở đây.
Hãy để tôi cắt tầm nhìn ra từ đây và sau đó thêm
nó vào các hoạt hình khác,
và sau đó cắt này ra để tôi có tài sản hoạt hình duy nhất với
cả FlyInout và chức năng hiển thị cả hai được bao gồm và gọi là có,
và sau đó là tài sản máy chủ.
Bây giờ, chúng ta hãy lưu các thay đổi và sau đó xem
hoạt hình mới mà chúng tôi chỉ áp dụng cho các thành phần của chúng tôi.
Bắt đầu với cái nhìn nhà.
Vì vậy, chúng tôi có chế độ xem nhà được hiển thị ở đây.
Bây giờ hãy để tôi nhanh chóng đi đến chế độ xem Giới thiệu,
và sau đó bạn thấy rằng chế độ xem Giới thiệu chỉ trượt
vào trong khi chế độ xem Trang chủ trượt ra màn hình ở đây.
Tương tự, khi tôi vào menu,
bạn sẽ thấy rằng chế độ xem Menu trượt vào trong khi chế độ xem Giới thiệu trượt ra ngoài.
Nó nhanh đến mức bạn không nhận thấy nó như vậy.
Tương tự, đối với dạng xem Liên hệ,
bạn sẽ thấy dạng xem liên hệ trượt vào.
Vì vậy, loại hình ảnh động này có thể được thêm vào bằng cách sử dụng
cách tiếp cận này mà chúng tôi chỉ minh họa cho ứng dụng Angular của bạn.
Chúng ta vẫn chưa xong. Chúng tôi sẽ làm thêm một hoạt hình trong ứng dụng của chúng tôi.
Để minh họa những gì tôi muốn làm trong hoạt hình tiếp theo,
chúng ta hãy xem nhanh thành phần menu.
Vì vậy, bạn thấy rằng khi thành phần menu,
khi spinner đang quay và sau đó được thay thế bằng chế độ xem,
chế độ xem đột nhiên xuất hiện trên màn hình,
và nó là một chút sợ hãi cho mắt.
Bạn có thể không nhận thấy nó.
Bạn có thể khá hài lòng với điều đó.
Nhưng chúng ta có thể thêm vào một cách nới lỏng trong
chế độ xem đó khi dữ liệu được lấy từ máy chủ và chế độ xem đang được kết xuất trong.
Vì vậy, khi biến của món ăn trong tập tin thành phần menu của tôi không trở nên vô hiệu,
sau đó spinner sẽ được ẩn và sau đó xem của món ăn,
trình đơn được xây dựng và sau đó đặt ra.
Vì vậy, chúng tôi muốn điều đó để dễ dàng vào màn hình.
Vì vậy, chúng ta hãy thêm vào một hình ảnh động nữa để thực hiện cả hai trong thành phần menu.
Chúng tôi cũng sẽ áp dụng cùng một điều trong thành phần chi tiết món ăn.
Chúng tôi cũng sẽ sử dụng cùng trong thành phần Trang chủ cũng và thành phần Giới thiệu,
nơi chúng tôi đang lấy dữ liệu để hiển thị danh sách các nhà lãnh đạo.
Vì vậy, bất cứ nơi nào bạn đang lấy dữ liệu từ máy chủ và sau đó đặt ra chế độ xem,
khi chế độ xem xuất hiện,
chúng tôi muốn giảm bớt chế độ xem bằng cách sử dụng hình ảnh động mới này mà tôi sẽ tạo tiếp theo.
Đi đến các ứng dụng animation.t tập tin,
tôi sẽ thêm vào một chức năng khác ở đây,
và để tôi gọi nó là mở rộng.
Chức năng này sẽ mở rộng chế độ xem đang được đặt
ra sau khi dữ liệu được lấy từ phía máy chủ.
Vì vậy, quan điểm này, một lần nữa,
tôi sẽ trả lại một cò súng ở đây.
Tôi sẽ đặt tên kích hoạt là mở rộng,
và kích hoạt này sẽ tạo ra.
Làm thế nào để xác định kích hoạt này.
Vì vậy, bên trong kích hoạt này, chúng ta sẽ bao gồm một trạng thái với ngôi sao trong đó.
Vì vậy, nó không quan trọng nó là trạng thái gì.
Tất cả các trạng thái sẽ được kết xuất với phong cách như
mờ một biến đổi dịch x 0.
Vì vậy, nó được hiển thị ngay và trung tâm trong ứng dụng của tôi.
Đó phải là một cú đúp ở đó.
Tôi nhìn nó và nói rằng:
Tại sao nó lại cho thấy một đường kẻ lén lút đỏ.
Vì vậy, khi bạn gõ rất nhanh, bạn thường mắc lỗi ở đó.
Vì vậy, thay vì một khung vuông,
đó phải là một cú đúp ở đó.
Vì vậy, đó là nhà nước.
Vì vậy, bất kỳ trạng thái nào mà nó sẽ được nhìn thấy hoàn toàn và tập trung nơi nó nên được tập trung.
Bây giờ, để tôi kích hoạt một quá trình chuyển đổi.
Bây giờ, quá trình chuyển đổi này sẽ được kích hoạt chỉ
khi nhập khi chế độ xem được đặt trên màn hình.
Phần thoát ra chúng tôi đã làm điều đó trong hoạt hình tuyến đường, vì vậy chúng tôi không cần điều đó.
Chúng ta chỉ cần phần giữa cho chế độ xem này bởi vì chế
độ xem được hiển thị lên màn hình này ở đó.
Vì vậy, trong nhập,
tôi sẽ xác định quá trình chuyển đổi một cách thích hợp.
Vì vậy, trong quá trình chuyển đổi tôi muốn làm gì?
Tôi muốn áp dụng cách tiếp cận tương tự mà tôi đã sử dụng với quá trình chuyển đổi nhập ở đây.
Vì vậy, tôi sẽ chỉ sao chép điều này và sau đó thực hiện một số điều chỉnh nhỏ để mã ở đó.
Vì vậy, đối với quá trình chuyển đổi nhập ở đây cũng,
tôi muốn áp dụng cùng một điều.
Tôi sẽ nói dịch Insta từ 100 phần trăm.
Tôi sẽ chỉ sử dụng 50 phần trăm và sau đó tôi sẽ làm dịch Y
Vì vậy, có nghĩa là quan điểm này sẽ thả xuống từ đầu 50 precent bắt đầu với
độ mờ không và sau đó tôi sẽ giảm bớt nó trong một thời gian nhanh hơn một chút,
200 mili giây và sẽ giảm bớt nó vào ứng dụng của chúng tôi.
Bây giờ, vì vậy, bạn thấy điều chỉnh nhỏ để mã ở đây.
Vì vậy, dịch trừ đi 50 phần trăm và độ mờ không và
nó được nới lỏng trong 200 mili giây và sau đó tại thời điểm đó,
tôi có thể áp dụng phong cách này như cùng một phong cách.
Tôi sẽ nộp đơn ở đó. Vì vậy, tôi sẽ chỉ sao chép phong cách đó và sau đó áp dụng phong cách đó ở đó.
Vì vậy, khi nó được nới lỏng,
nó sẽ đi vào và được hoàn toàn nhìn thấy nơi nó nên được.
Vì vậy, đây là chức năng mở rộng mà tôi đã định nghĩa ở đây.
Vì vậy, tôi muốn sử dụng chức năng này ở đâu?
Chúng tôi sẽ đi đầu tiên để thành phần menu và trong thành phần menu,
bây giờ tôi cũng sẽ nhập khẩu mà,
mở rộng và sau đó thêm nó vào vào hình ảnh động của tôi và sau đó làm thế nào để tôi áp dụng mở rộng này?
Vì vậy, đi đến tập tin mẫu thành phần trình đơn đó.
Trong tập tin mẫu,
tôi sẽ áp dụng mở rộng danh
sách lưới mà tôi đang áp dụng này.
Vì vậy, hãy để tôi sao chép điều đó và sau đó chúng tôi cũng sẽ đi
đến các thành phần nhà và trong các thành phần nhà cũng,
tôi sẽ bao gồm mở rộng và sau đó thêm mở rộng để hoạt hình,
và sau đó đi đến các thành phần nhà tập tin mẫu và sau đó tôi sẽ áp dụng
mở rộng để các thành phần món ăn MD thẻ,
để các thành phần khuyến mãi thẻ MD và cũng cho các
thành phần lãnh đạo thẻ MD ở đây bởi vì tất cả
ba sẽ được lấy trong tương lai từ máy chủ và sau đó trả lại.
Vì vậy, dữ liệu thành phần món ăn đã được lấy từ máy chủ.
Bây giờ, điều tương tự sẽ đến thành phần DishDetail.
Tôi sẽ thêm vào mở rộng để nhập khẩu và sau đó thêm
một mở rộng vào hoạt hình sẽ để xem thành phần DishDetail.
Cùng với một tầm nhìn,
Tôi cũng sẽ áp dụng mở rộng để
div thẻ ở đó và sau đó để ý kiến div cũng ở đây.
Điều này nằm trong thành phần DishDetail.
Thành phần liên hệ không có bất cứ điều gì đang được lấy từ máy chủ.
Vì vậy, tôi sẽ chỉ đi qua các thành phần về và trong các thành phần về cũng,
tôi sẽ bao gồm mở rộng và cũng trong các hình ảnh động.
Đi đến tập tin mẫu về thành phần ở đây thử nghiệm này
ở đây cho thấy các nhà lãnh đạo đang được lấy từ phía máy chủ.
Vì vậy, tôi sẽ áp dụng việc mở rộng này.
Hãy lưu các thay đổi và sau đó đi và
xem ứng dụng góc cạnh của chúng tôi trong trình duyệt.
Đi đến ứng dụng góc cạnh của chúng tôi.
Bây giờ, khi bạn đi vào mẫu nhà,
bạn có thể thấy rằng các thẻ khi chúng được lấy,
chúng trượt vào tầm nhìn của tôi ở đó.
Bây giờ, tương tự như khi bạn đi đến thành phần về,
bạn thấy rằng một khi dữ liệu được lấy từ máy chủ,
sau đó kết xuất của các nhà lãnh đạo khác nhau đang được
trượt trong bao giờ quá chậm vào vị trí trong quan điểm này ở đây.
Tương tự, đi đến thành phần menu,
chúng ta sẽ thấy một hành vi tương tự ở đây.
Vì vậy, một khi dữ liệu menu đã sẵn sàng,
thành phần menu sẽ trượt vào vị trí ngay tại đó.
Cùng một điều với các thành phần chi tiết món ăn.
Vì vậy, hãy để tôi đi đến thành phần DishDetail và bạn sẽ thấy rằng
chế độ xem trượt vào vị trí
đó nhưng các hoạt hình khác đã
biến mất và tái xuất hiện phần đó vẫn hoạt động giống như trước đây.
Vì vậy, bạn thấy rằng chúng tôi đã giới thiệu một hình ảnh động khác vào ứng dụng Angular của chúng tôi.
Bây giờ, cho dù bạn thích điều này hay bạn muốn làm một cách phức tạp hơn để làm hoạt hình,
chắc chắn, bạn có thể phát điên với
việc làm nhiều thứ khác nhau với hoạt hình của bạn.
Thay đổi nhiều thuộc tính khác nhau trong các kiểu như theo cách bạn thích và vân vân.
Nhưng tôi cảm thấy rằng một vài hình ảnh động tinh tế ở đây và ở đó sẽ
giúp tăng cường giao diện người dùng cho ứng dụng góc cạnh của tôi.
Vì vậy, tôi đã thêm vào hai hình ảnh động mới để ứng dụng Angular của tôi.
Với điều này, chúng tôi hoàn thành phần thứ hai của bài tập hình ảnh động của chúng tôi.
Tôi hy vọng rằng với hai phần tập thể dục này,
bạn đã hiểu rõ hơn về cách sử dụng
hình ảnh động trong ứng dụng Angular của bạn.
Đây là thời điểm tốt để bạn thực hiện một cam kết git với thông điệp, hình ảnh động phần hai.