Podcast CSS – 044: Chuyển đổi
Khi tương tác với một trang web, bạn có thể nhận thấy nhiều phần tử có state. Ví dụ: trình đơn thả xuống có thể ở trạng thái mở hoặc đóng. Các nút có thể thay đổi màu khi lấy tiêu điểm hoặc di chuột. Các mô-đun xuất hiện và biến mất.
Theo mặc định, CSS chuyển đổi kiểu của các trạng thái này ngay lập tức.
Khi sử dụng chuyển đổi CSS, chúng ta có thể nội suy giữa trạng thái ban đầu và trạng thái mục tiêu của phần tử. Sự chuyển đổi giữa hai yếu tố này giúp nâng cao trải nghiệm người dùng bằng cách cung cấp định hướng trực quan, hỗ trợ và gợi ý về nguyên nhân và tác động của tương tác.
Thuộc tính chuyển đổi
Để sử dụng hiệu ứng chuyển đổi trong CSS, bạn có thể sử dụng các thuộc tính chuyển đổi hoặc thuộc tính viết tắt transition.
thuộc tính chuyển đổi
Thuộc tính transition-property chỉ định(các) kiểu cần chuyển đổi.
.my-element {
transition-property: background-color;
}
transition-property chấp nhận một hoặc nhiều tên thuộc tính CSS trong danh sách được phân tách bằng dấu phẩy.
Nếu muốn, bạn có thể sử dụng transition-property: all để cho biết rằng mọi thuộc tính sẽ chuyển đổi.
thời lượng chuyển đổi
Thuộc tính transition-duration được dùng để xác định khoảng thời gian hoàn tất một quá trình chuyển đổi.
transition-duration chấp nhận đơn vị thời gian, tính bằng giây (s) hoặc mili giây (ms) và mặc định là 0s.
hàm-thời-gian-chuyển-đổi
Sử dụng thuộc tính transition-timing-function để thay đổi tốc độ chuyển đổi CSS trong transition-duration.
Theo mặc định, CSS sẽ chuyển đổi các phần tử của bạn với tốc độ không đổi (transition-timing-function: linear). Tuy nhiên, quá trình chuyển đổi tuyến tính có thể có vẻ hơi giả tạo: trong thực tế, các đối tượng có trọng số và không thể dừng và bắt đầu ngay lập tức. Việc di chuyển vào hoặc ra khỏi quá trình chuyển đổi có thể làm cho các đoạn chuyển đổi thêm sống động và tự nhiên.
Mô-đun về Ảnh động CSS của chúng tôi có nội dung tổng quan đầy đủ về các hàm thời gian.
Bạn có thể dùng DevTools để thử nghiệm nhiều hàm thời gian theo thời gian thực.
độ trễ khi chuyển đổi
Sử dụng thuộc tính transition-delay để chỉ định thời điểm bắt đầu quá trình chuyển đổi. Nếu bạn không chỉ định transition-duration, quá trình chuyển đổi sẽ bắt đầu ngay lập tức vì giá trị mặc định là 0s. Tài sản này chấp nhận đơn vị thời gian, ví dụ: giây (s) hoặc mili giây (ms).
Thuộc tính này rất hữu ích cho quá trình chuyển đổi gây giật gân, bạn có thể thực hiện việc này bằng cách thiết lập transition-delay dài hơn cho mỗi phần tử tiếp theo trong nhóm.
transition-delay cũng rất hữu ích khi gỡ lỗi. Việc đặt độ trễ thành giá trị âm có thể bắt đầu quá trình chuyển đổi sâu hơn vào dòng thời gian.
viết tắt: chuyển đổi
Giống như hầu hết các tài sản CSS, đều có phiên bản viết tắt. transition kết hợp transition-property, transition-duration, transition-timing-function và transition-delay.
.longhand {
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.shorthand {
transition: transform 300ms ease-in-out 0s;
}
Phần nào có thể và không thể chuyển đổi?
Khi viết CSS, bạn có thể chỉ định thuộc tính nào cần có hiệu ứng chuyển đổi động. Xem danh sách MDN này về các thuộc tính CSS có thể tạo ảnh động.
Nói chung, bạn chỉ có thể chuyển đổi các phần tử có "trạng thái ở giữa" giữa trạng thái bắt đầu và trạng thái cuối cùng. Ví dụ: không thể thêm hiệu ứng chuyển đổi cho font-family vì không rõ "trạng thái ở giữa" giữa serif và monospace sẽ có dạng như thế nào. Mặt khác, bạn có thể thêm các hiệu ứng chuyển đổi cho font-size vì đơn vị của nó là độ dài có thể nội suy giữa.
Dưới đây là một số thuộc tính phổ biến mà bạn có thể chuyển đổi.
Biến đổi
Thuộc tính CSS transform thường được chuyển đổi vì đây là thuộc tính được tăng tốc GPU, nhờ đó tạo ra ảnh động mượt mà hơn và tiêu tốn ít pin hơn. Thuộc tính này cho phép bạn tuỳ ý điều chỉnh tỷ lệ, xoay, dịch hoặc nghiêng một phần tử.
Hãy xem phần về biến đổi trong mô-đun Hàm của chúng tôi.
Màu
Trước, trong và sau khi người dùng tương tác, màu sắc có thể là một chỉ báo hiệu quả về trạng thái. Ví dụ: một nút có thể thay đổi màu nếu bạn di chuột. Sự thay đổi màu này có thể cho người dùng biết rằng nút đó có thể nhấp được.
Các thuộc tính color, background-color và border-color chỉ là một vài vị trí có thể chuyển đổi màu sắc khi tương tác.
Hãy xem mô-đun về màu sắc của chúng tôi.
Bóng
Bóng thường được dịch chuyển để biểu thị sự thay đổi về độ cao, chẳng hạn như từ tâm điểm của người dùng.
Hãy xem mô-đun của chúng tôi về bóng.
Bộ lọc
filter là một thuộc tính CSS mạnh mẽ cho phép bạn thêm hiệu ứng đồ hoạ một cách nhanh chóng. Việc chuyển đổi giữa các trạng thái filter khác nhau có thể tạo ra một số kết quả khá ấn tượng.
Hãy xem mô-đun về bộ lọc của chúng tôi.
Trình kích hoạt chuyển đổi
CSS của bạn phải có sự thay đổi trạng thái và một sự kiện kích hoạt sự thay đổi trạng thái đó để kích hoạt quá trình chuyển đổi CSS. Ví dụ điển hình về điều kiện kích hoạt như vậy là lớp giả :hover. Lớp giả này sẽ khớp khi người dùng di chuột qua một phần tử bằng con trỏ.
Dưới đây là danh sách một số lớp giả và sự kiện có thể kích hoạt thay đổi trạng thái trong các phần tử của bạn.
:hover: so khớp xem con trỏ có nằm trên phần tử hay không.:focus: khớp xem phần tử có được làm tâm điểm hay không.:focus-within: khớp xem phần tử hoặc bất kỳ phần tử con nào của phần tử đó có được làm tâm điểm hay không.:target: khớp khi mảnh của URL hiện tại khớp với mã nhận dạng của phần tử.:active: khớp khi phần tử đang được kích hoạt (thường là khi nhấn chuột lên phần tử đó).- Thay đổi
classtừ JavaScript: khi CSSclasscủa một phần tử thay đổi thông qua JavaScript, CSS sẽ chuyển đổi các thuộc tính đủ điều kiện đã thay đổi.
Các cách chuyển đổi khác nhau cho chế độ vào hoặc ra
Khi đặt nhiều thuộc tính transition khi di chuột/lấy tiêu điểm, bạn có thể tạo ra một số hiệu ứng thú vị.
.my-element {
background: red;
/* This transition is applied on the "exit" transition */
transition: background 2000ms ease-in;
}
.my-element:hover {
background: blue;
/* This transition is applied on the "enter" transition */
transition: background 150ms ease;
}
Những điểm cần cân nhắc về khả năng hỗ trợ tiếp cận
Việc chuyển đổi CSS không dành cho tất cả mọi người. Đối với một số người, hiệu ứng chuyển cảnh và hoạt ảnh có thể gây say chuyển động hoặc khó chịu. Rất may là CSS có tính năng phát nội dung đa phương tiện tên là prefers-reduced-motion. Tính năng này phát hiện xem người dùng có cho biết họ muốn giảm bớt chuyển động trên thiết bị của họ hay không.
/*
If the user has expressed their preference for
reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
.my-element {
transition: none;
}
}
/*
If the browser understands the media query and the user
explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
.my-element {
transition: transform 250ms ease;
}
}
Hãy xem bài đăng trên blog của chúng tôi p Gói ưu tiên-giảm-chuyển động: Đôi khi, chuyển động ít hơn để biết thêm thông tin về tính năng đa phương tiện này.
Xem xét hiệu suất
Trong quá trình chuyển đổi CSS, bạn có thể gặp phải các vấn đề về hiệu suất nếu thêm quá trình chuyển đổi cho một số tài sản CSS. Ví dụ: khi các thuộc tính như width hoặc height thay đổi, chúng sẽ đẩy nội dung xung quanh phần còn lại của trang. Điều này buộc CSS phải tính toán các vị trí mới cho mọi phần tử bị ảnh hưởng trong mỗi khung hình của quá trình chuyển đổi. Khi có thể, bạn nên sử dụng các thuộc tính như transform và opacity.
Hãy xem hướng dẫn về ảnh động CSS hiệu suất cao của chúng tôi để tìm hiểu chuyên sâu về chủ đề này.
Kiểm tra mức độ hiểu biết của bạn
Kiểm tra kiến thức của bạn về hiệu ứng chuyển đổi
Thuộc tính chuyển đổi nào dùng để chỉ định tốc độ?
transition-durationtransition-easingtransition-cubic-beziertransition-timing-functionanimation-easeTốt nhất là bạn nên dùng transition-property: all
all có thể dẫn đến các vấn đề về hiệu suất và chuyển đổi ngoài ý muốn.Tất cả cơ sở lưu trú đều có thể chuyển đổi được.
font-family không thể chuyển đổi.