- vừa được xem lúc

[CSS] Bài 15 - Các Hiệu Ứng Chuyển Tiếp

0 0 5

Người đăng: Semi Art

Theo Viblo Asia

Trong bài viết này, chúng ta sẽ nói về việc bổ sung các hiệu ứng chuyển tiếp cho các thành phần tương tác với người dùng. Các ví dụ trong bài viết này yêu cầu các trình duyệt web được cập nhật tới các phiên bản được phát hành gần đây.

Thuộc tính transition

Thuộc tính transition có thể giúp chúng ta dễ dàng bổ sung các hiệu ứng chuyển tiếp cho các thành phần tương tác với người dùng. Chúng ta chỉ cần đặt vào phần giá trị của transition tên của thuộc tính sẽ được thay đổi và thời gian chuyển tiếp:

transition: property duration;

Ở đây chúng ta cũng cần lưu ý rằng không phải thuộc tính nào cũng hỗ trợ hiệu ứng chuyển tiếp. Bạn có thể xem danh sách đầy đủ của các thuộc tính có thể tạo hoạt ảnh chuyển tiếp tại đây: CSS Animatable

Hãy thử viết một ví dụ để xem thuộc tính transition hoạt động thực tế. Chúng ta sẽ mô phỏng đồi cỏ xuân có background-color chuyển tiếp mượt mà khi chúng ta thay đổi mùa.

time.html

<!doctype html>
<html> <head> <meta charset="utf-8"> <title>Time</title> <link rel="stylesheet" href="time.css"> </head> <body> <input id="spring" type="radio" name="season" checked> Spring | <input id="summer" type="radio" name="season"> Summer | <input id="fall" type="radio" name="season"> Fall | <input id="winter" type="radio" name="season"> Winter <div class="field"></div> </body>
</html>

time.css

.field { height: 320px; margin-top: 12px; transition: background-color 0.9s;
} #spring:checked ~ .field { background-color: LimeGreen;
} #summer:checked ~ .field { background-color: ForestGreen;
} #fall:checked ~ .field { background-color: Yellow;
} #winter:checked ~ .field { background-color: WhiteSmoke;
}

Xem kết quả hiển thị

Nếu như chúng ta muốn tạo hiệu ứng chuyển dịch với nhiều hơn 1 thuộc tính, cách đơn giản nhất là sử dụng từ khóa all thay cho tên của một thuộc tính cụ thể.

transition: all 1s;

Thuộc tính transition còn có thể nhận thêm 2 giá trị nữa là:

  • timing-function - kiểu phân bố thời gian chuyển tiếp.
  • và thời gian trễ trước khi bắt đầu thể hiện hiệu ứng chuyển tiếp.

transition: all 1s linear 0.5s;

Dòng code ví dụ vừa rồi sử dụng kiểu chuyển tiếp linear với tốc độ chuyển tiếp đều trong suốt thời gian chuyển tiếp 1s, và thời gian trễ trước khi thể hiện hiệu ứng là 0.5s.

Hiệu ứng chuyển tiếp phức tạp

Thuộc tính transition còn cho phép chúng ta tạo ra hiệu ứng chuyển tiếp phức tạp hơn một chút. Lấy ví dụ là chúng ta muốn tạo ra những hiệu ứng chuyển tiếp với nhiều thuộc tính khác nhau. Việc này có thể thực hiện bằng cú pháp sau:

transition: property1 duration1 [delay1], property2 duration2 [delay2], ...;

Trong trường hợp này, nếu cần sử dụng timing-function thì chúng ta cần chỉ định bằng thuộc tính transition-timing-function.

transition-timing-function: linear;

Hãy thử viết một ví dụ để triển khai một hiệu ứng hơi phức tạp một chút. Chúng ta sẽ tạo ra một khối có thể được mở rộng/thu gọn và có màu nền thay đổi với hiệu ứng chuyển tiếp.

breath.html

<!doctype html>
<html> <head> <meta charset="utf-8"> <title>Breath</title> <link rel="stylesheet" href="breath.css"> </head> <body> <input id="toggler" type="checkbox"> Expand/Collapse <div class="box"></div> </body>
</html>

breath.css

.box { width: 100%; height: 300px; max-width: 100px; max-height: 100px; background-color: Crimson; transition: background-color 0.9s, max-width 0.6s 0.9s, max-height 0.3s 1.5s; transition-timing-function: linear;
} #toggler:checked + .box { max-width: 100%; max-height: 300px; background-color: ForestGreen;
}

Xem kết quả hiển thị

Xây dựng một slide ảnh đơn giản

Tới đây thì mình tin là bạn đã có thể hoàn thiện thanh điều hướng responsive mà chúng ta đã xây dựng trước đó thêm một chút. Đó là bổ sung thêm hiệu ứng chuyển tiếp khi người dùng thiết bị di động màn hình nhỏ mở/đóng danh sách liên kết.

[HTML + CSS] Xây Dựng Thanh Điều Hướng Responsive

Trước khi viết bài CSS về transition này thì mình dự định sẽ mời bạn cùng viết code cho một cái danh sách dạng sổ xuống dropdown mà chúng ta thường gặp trên bất kỳ trang web nào. Tuy nhiên thì cách xử lý ở đây không có gì khác lắm so với tính năng mở/đóng thanh điều hướng trên thiết bị di động màn hình nhỏ. Vì vậy nên khi viết tới đây mình đã nghĩ tới một thành phần khác cũng rất phổ biến trên các trang web đó là slide ảnh.

Như thường lệ thì mình cũng di chuyển phần này tới một bài viết riêng để giữ cho nội dung ở đây được tập trung vào việc giới thiệu thuộc tính transition. Vì vậy nên bạn hãy duy trì Tab web hiện tại và mở thêm liên kết dưới đây để đi tới bài viết cho slide ảnh nhé.

(Sắp đăng tải) [HTML + CSS] Xây Dựng Một Slide Ảnh Đơn Giản

Bình luận

Bài viết tương tự

- vừa được xem lúc

Căn giữa các phần tử HTML theo chiều dọc (phần 1)

Bài viết được dịch từ bài Vertical centering of elements in HTML xuất bản ngày 18/01/2015 trên trang Web++. .

0 0 58

- vừa được xem lúc

Căn giữa phần tử trong CSS

1. Theo chiều ngang. Đó có phải là phần tử inline hay inline-* (như text hay links). .

0 0 49

- vừa được xem lúc

99% không biết đến mẹo này khi sử dụng Flexbox CSS

Hello lại là mình đây. Bài viết hôm nay mình sẽ giới thiệu tới mọi người một trick khá hay khi dùng CSS flexbox nhé. 1. Chia layout với flexbox.

0 0 47

- vừa được xem lúc

Vanilla JS Project: Tính tuổi

1. Yêu cầu.

0 0 49

- vừa được xem lúc

1 số UI component và layout hữu ích với Frontend

Giới thiệu. Hôm nay mình xin chia sẻ 1 số Layout và UI component quen mà có lẽ là quen thuộc với nhiều người khi làm dự án, hay bắt gặp trên mạng.

0 0 47

- vừa được xem lúc

Style text css

Giới thiệu. Chào 2021, mình sẽ giới thiệu vài kiểu style cho text màu mè chút cho rực rỡ .

0 0 28