GALAXY TECH
Chuyên gia Công nghệ
Thứ tư, 16/09/2020 | 00:00 GMT+7

Cách tạo ảnh động với Animate.css

Hoạt ảnh có thể tạo ra hoặc phá vỡ trải nghiệm user đối với ứng dụng của bạn. Bạn có thể tạo ảnh động CSS theo cách thủ công bằng cách sử dụng CSS3 tiêu chuẩn, nhưng giải pháp này yêu cầu bảo trì và cấu hình đáng kể. Ngoài ra, bạn có thể sử dụng Animate.css , tự mô tả nó là “một thư viện các hoạt ảnh trên nhiều trình duyệt, sẵn sàng sử dụng”. Những hình ảnh động “chỉ cần thêm nước” này cung cấp một giải pháp nhanh chóng và hiệu quả cho mọi nhu cầu tạo hoạt ảnh của bạn.

Trong hướng dẫn này, ta sẽ xây dựng một ứng dụng danh sách việc làm nhỏ bằng Javascript và sau đó tạo hoạt ảnh cho các phần tử khác nhau. Để chứng minh cách Animate.css có thể cải thiện quy trình làm việc của bạn, trước tiên ta sẽ tạo hoạt ảnh cho một phần tử bằng cách sử dụng CSS3 chuẩn và sau đó cấu trúc lại mã của ta để sử dụng Animate.css. Sau đó, ta sẽ thêm một số hoạt ảnh bổ sung từ thư viện mở rộng của Animate.css.

Yêu cầu

Để hoàn thành hướng dẫn này, bạn cần :

  • Editor mã do bạn chọn, chẳng hạn như nano hoặc Visual Studio Code
  • Một trình duyệt web
  • Một sự thoải mái với các nguyên tắc cơ bản về HTML. Bạn có thể xem loạt bài hướng dẫn Cách Xây dựng Trang web bằng HTML để được giới thiệu.

Bước 1 - Tạo ứng dụng cơ sở

Trước khi khám phá cách sử dụng thư viện Animate.css, hãy xây dựng một ứng dụng danh sách việc làm nhỏ. Điều này sẽ cung cấp cho ta một số yếu tố để tạo kiểu. Sau đó, ta sẽ viết mã một hoạt ảnh fadeIn bằng cách sử dụng CSS3 tiêu chuẩn.

Đầu tiên, tạo một folder mới cho dự án này:

  • mkdir animate-css-example

Và sau đó chuyển bên trong:

  • cd animate-css-example

Ta sẽ tạo ba file ở đây: index.html , app.js và style.css .

Sử dụng nano hoặc trình soạn thảo mã bạn muốn để tạo file đầu tiên, index.html :

  • nano index.html

Thêm nội dung sau để xác định một trang HTML ngắn gọn với các liên kết đến các file CSS và Javascript của ta :

./animate-css-example/index.html
<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>CSS Animations</title>   <link rel="stylesheet" href="style.css"> </head> <body>    <div>     <input type="text" id="todoInput">     <button onclick="addTodo()">Add Todo</button>   </div>    <ul>   </ul>    <script src="app.js"></script> </body> </html>

Ở đây ta đã thêm một tiêu đề, CSS Animations và được liên kết với CSS stylesheet của ta ( ta sẽ thực hiện tiếp theo). Sau đó, ta xác định một số đối tượng Javascript bên trong <div> và liên kết đến file thứ ba của ta , app.js

Lưu và đóng file .

Bây giờ, hãy tạo và mở style.css trong trình soạn thảo của bạn:

  • nano style.css

Thêm nội dung sau, sẽ xác định hoạt ảnh fadeIn của ta :

./animate-css-example/style.css
.fadeIn {   animation: fadeIn 1s; }  @keyframes fadeIn {   from {     opacity: 0;   }   to {     opacity: 1;   } }

Ta đã xác định thời lượng của hoạt ảnh và sử dụng @keyframes at-rule để cấu hình một chu kỳ hoạt ảnh.

Lưu và đóng file .

Bây giờ, hãy tạo file cuối cùng của ta , app.js :

  • nano app.js

Thêm nội dung sau. Điều này sẽ xác định hàm addTodo của ta và nhúng hoạt ảnh của ta :

./animate-css-example/app.js
const addTodo = () => {   const ul = document.getElementsByTagName('ul')[0];   const input = document.getElementById('todoInput').value;    if (input.length > 0) {     const li = document.createElement('li');      li.classList.add('fadeIn');     li.appendChild(document.createTextNode(input));      ul.appendChild(li);      document.getElementById('todoInput').value = '';   } };

Ứng dụng Todo của ta bao gồm một trường văn bản và một nút. Khi ta nhập văn bản vào trường và nhấn nút, một phần tử mới sẽ được tạo và văn bản của ta được nối vào đó. Lưu ý dòng được đánh dấu. Ở đây ta đã thêm lớp fadeIn vào mọi phần tử mới được tạo.

Lưu và đóng file .

Bây giờ, hãy mở trình duyệt và tải index.html . Một trường và một nút sẽ xuất hiện. Viết một số văn bản vào trường và nhấn Thêm Todo . Việc làm mới của bạn sẽ mờ dần.

Hoạt hình Todo

Ta đã áp dụng thành công hoạt ảnh CSS cho một phần tử bằng cách sử dụng CSS3 chuẩn. Bây giờ, hãy cấu trúc lại mã của ta để sử dụng Animate.css và xem nó có thể cải thiện năng suất và khả năng đọc của ta như thế nào. Sau đó, ta sẽ khám phá thêm một vài hình ảnh động trong thư viện.

Bước 2 - Sử dụng Thư viện Animate.css

Trong bước này, ta sẽ cấu trúc lại mã của bạn bằng Animate.css và sau đó khám phá một số hoạt ảnh bổ sung.

Đầu tiên, ta cần cài đặt Animate.css. Ta có thể thực hiện việc này bằng CDN hoặc mạng phân phối nội dung .

Mở lại index.html trong editor :

  • nano index.html

Bên trong <head> , hãy xóa <link> hiện có thành style.css và thay thế bằng mã được đánh dấu:

./animate-css-example/index.html
<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>CSS Animations</title>   <link     rel="stylesheet"     href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"   /> </head> <body>    <div>     <input type="text" id="todoInput">     <button onclick="addTodo()">Add Todo</button>   </div>    <ul>   </ul>    <script src="app.js"></script> </body> </html>

Thẻ <link> này sẽ sử dụng liên kết chính thức của Animate.css để thêm thư viện của họ trực tiếp vào trang web .

Lưu ý: Bạn cũng có thể cài đặt thư viện bằng trình quản lý gói nút (npm) hoặc trình quản lý gói sợi .

Để cài đặt thư viện bằng npm, hãy sử dụng lệnh sau:

  • npm install animate.css

Hoặc, để cài đặt thư viện bằng sợi, hãy sử dụng lệnh sau:

  • yarn add animate.css

Lưu và đóng index.html

Bây giờ hãy cấu trúc lại Javascript của ta để áp dụng hoạt ảnh fadeIn bằng Animate.css.

Mỗi lớp trong thư viện Animate.css sử dụng tiền tố animate__ . Đầu tiên, bạn phải thêm animate__animated . Điều này hướng dẫn phần tử sử dụng thư viện Animate.css. Sau đó, bạn thêm animate__ specific_animation . Bạn có thể duyệt trang web chính thức của thư viện để biết các tùy chọn có sẵn .

Trong trường hợp của ta , ta sẽ thêm animate__animated và sau đó animate__fadeIn vào classList của ta để mọi li mới hoặc phần tử danh sách sẽ mờ dần.

áp dụng các thay đổi được đánh dấu sau cho mã của bạn. Tệp cuối cùng của bạn sẽ trông như thế này:

./animate-css-example/app.js
const addTodo = () => {   const ul = document.getElementsByTagName('ul')[0];   const input = document.getElementById('todoInput').value;    if (input.length > 0) {     const li = document.createElement('li');      const animations = [       'animate__animated',       'animate__fadeIn'     ];      li.classList.add(...animations);     li.appendChild(document.createTextNode(input));      ul.appendChild(li);      document.getElementById('todoInput').value = '';   } };

Ta đã tạo một hằng số bao gồm các lớp Animate.css của ta và sau đó thay thế fadeIn bằng hằng số trên dòng sau.

Lưu và đóng file .

Bây giờ reload trình duyệt của bạn. Phong cách fadeIn sẽ vẫn xuất hiện, chỉ là bây giờ bạn đang quản lý hiệu ứng bằng thư viện Animate.css.

Thêm hoạt ảnh nhanh chóng với Animate.css và giúp tạo mã có thể đọc được. Để chứng minh điều này, hãy thêm một vài hoạt ảnh vào <body> của ta .

Mở index.html trong trình soạn thảo của bạn:

  • nano index.html

Hãy tưởng tượng nếu ta muốn mọi phần tử bên trong DOM phóng to khi user tải trang và ta cũng muốn hoạt ảnh đó lặp lại ba lần. Tất cả ta cần làm là thêm các animated__animate , các animated__zoomIn , và animated__repeat lớp học để mã của ta .

Thêm ba lớp này vào <body> :

./animate-css-example/index.html
<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>CSS Animations</title>   <link     rel="stylesheet"     href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"   /> </head> <body class="animate__animated animate__zoomIn animate__repeat-3">   <div>     <input type="text" id="todoInput">     <button onclick="addTodo()">Add Todo</button>   </div>    <ul>   </ul>    <script src="app.js"></script> </body> </html>

Lưu và đóng file .

Bây giờ reload index.html trong trình duyệt và xem hoạt ảnh mới của bạn.

Yếu tố cơ thể có thu phóng

Không cần viết thủ công CSS hoặc cấu hình bất kỳ at-rules , ta đã nhúng thành công hoạt ảnh CSS vào HTML và Javascript bằng cách sử dụng thư viện Animate.css.

Kết luận

Animate.css là một giải pháp nhanh chóng và hiệu quả để thêm hoạt ảnh CSS. Sử dụng nó có thể tăng tốc quy trình làm việc của bạn và tạo nhiều mã dễ đọc hơn. Từ đây, bạn có thể khám phá toàn bộ thư viện hoạt ảnh trên trang web chính thức của Animate.css .

Nhưng hãy nhớ rằng, hoạt ảnh có thể nhanh chóng cản trở chứ không cải thiện trải nghiệm user . Animate.css bao gồm các phần hữu ích về Các phương pháp hay nhất và Gotchas để hoạt ảnh của bạn thành công nhất. Hoạt hình cũng có thể gây hại cho những người có một số vấn đề về y tế. Animate.css hỗ trợ media query prefers-reduced-motion , để khách hàng có thể tắt các hoạt ảnh có thể gây hại.

Tags:

Các tin liên quan

Cách xác định phông chữ tùy chỉnh trong CSS với @ font-face và font-display
2020-09-16
6 tiện ích mở rộng CSS tuyệt vời cho VS Code
2020-09-15
Màu mã hex CSS với giá trị alpha
2020-09-09
Thay đổi con trỏ chuột trong CSS bằng thuộc tính con trỏ
2020-09-08
image đường viền và đường viền Gradient trong CSS thuần túy
2020-09-03
Cắt image trong CSS với đối tượng phù hợp
2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
CSS Grid: Hợp lý và Căn chỉnh
2020-09-03
Bố cục lưới CSS: Đơn vị Fr
2020-09-03
Giới thiệu về Clipping Sử dụng clip-path trong CSS
2020-09-03