Đối với các tình huống mà người dùng đã chỉ định rằng họ thích giảm chuyển động hơn, bạn có thể áp dụng hoạt ảnh và chuyển tiếp một cách có điều kiện bằng cách sử dụng các biến thể motion-safe và motion-reduce
Hover meáp dụng có điều kiện
Di chuột, tập trung và các trạng thái khác
Tailwind cho phép bạn áp dụng có điều kiện các lớp tiện ích ở các trạng thái khác nhau bằng cách sử dụng các công cụ sửa đổi biến thể. Ví dụ: sử dụng hover:transition-all để chỉ áp dụng tiện ích transition-all khi di chuột
Để biết danh sách đầy đủ tất cả các công cụ sửa đổi trạng thái có sẵn, hãy xem tài liệu về Hover, Focus và Other States
Bạn cũng có thể sử dụng các công cụ sửa đổi biến thể để nhắm mục tiêu các truy vấn phương tiện như điểm ngắt phản hồi, chế độ tối, chuyển động giảm ưu tiên, v.v. Ví dụ: sử dụng md:transition-all để áp dụng tiện ích transition-all chỉ ở kích thước màn hình trung bình trở lên
Để tìm hiểu thêm, hãy xem tài liệu về Thiết kế đáp ứng, Chế độ tối và
Sử dụng các giá trị tùy chỉnh
Tùy chỉnh chủ đề của bạn
Theo mặc định, Tailwind cung cấp các tiện ích thuộc tính chuyển tiếp cho bảy tổ hợp thuộc tính phổ biến. Bạn có thể tùy chỉnh các giá trị này bằng cách chỉnh sửa Hover me 0 hoặc Hover me 1 trong tệp Hover me 2 của mình
module.exports = { theme: { extend: { transitionProperty: { 'height': 'height', 'spacing': 'margin, padding', } } } }
Tìm hiểu thêm về cách tùy chỉnh chủ đề mặc định trong tài liệu
Giá trị tùy ý
Nếu bạn cần sử dụng giá trị Hover me 3 một lần không hợp lý để đưa vào chủ đề của mình, hãy sử dụng dấu ngoặc vuông để tạo nhanh một thuộc tính bằng cách sử dụng bất kỳ giá trị tùy ý nào
Có rất nhiều sự trùng lặp do tiền tố của nhà cung cấp - cho đến khi thông số kỹ thuật được hoàn thiện, điều này sẽ vẫn tồn tại. Nếu điều này làm phiền bạn, có nhiều công cụ khác nhau như CSS Scaffold, LESS hoặc tùy chọn của tôi - SASS, cho phép bạn xác định mixin để tránh mã lặp lại
Một cách tiếp cận khác đơn giản là viết CSS mà không có tiền tố, sau đó sử dụng -prefix-free của Lea Verou để thêm chúng vào khi chạy
Điều bạn chắc chắn không nên làm là chỉ bao gồm tiền tố webkit. Mặc dù có vẻ hấp dẫn, đặc biệt là khi phát triển cho thiết bị di động, webkit không phải là công cụ kết xuất duy nhất
Điều đáng chú ý là không có tiền tố -ms- trên các thuộc tính này. IE10 là trình duyệt đầu tiên xuất xưởng mà không có tiền tố trên các. Tuy nhiên, các bản beta của IE10 đã sử dụng tiền tố, vì vậy bạn có thể thấy mã sử dụng -ms-. Nó không cần thiết mặc dù
Cú pháp khá đơn giản, bạn chỉ định thuộc tính bạn muốn tạo hoạt ảnh, tất cả hoặc bán kính đường viền hoặc màu sắc hoặc bất kỳ thứ gì, thời gian chạy, sau đó là chức năng định thời gian chuyển tiếp. Các tùy chọn cho chức năng thời gian được hiển thị bên dưới
Bất cứ khi nào bất kỳ thuộc tính nào thay đổi, thì nó sẽ hoạt ảnh thay vì thay đổi trực tiếp. Điều này có thể là do một bộ thuộc tính khác được đặt trên một lớp giả, chẳng hạn như di chuột hoặc một lớp hoặc thuộc tính mới do javascript đặt. Ví dụ dưới đây sử dụng. di chuột để thay đổi thuộc tính – không cần javascript
Để thấy sự khác biệt về tốc độ, hãy xem bài kiểm tra tốc độ
chức năng thời gian khác nhau
Ngoài các chức năng định thời được tích hợp sẵn, bạn cũng có thể chỉ định chức năng của riêng mình. Ceaser CSS Easing Tool tuyệt vời giúp việc này trở nên rất dễ dàng
Điều đáng chú ý là các đường cong bạn tạo ra có thể có giá trị âm trong đó. Đường cong bezier cho hộp cuối cùng ở trên là ________ 58 _______, các giá trị âm đang khiến nó 'tăng tốc', trông khá tuyệt
Sự chậm trễ
Cú pháp cho quá trình chuyển đổi CSS3 có dạng
transition: [ || || || ]Bạn sẽ nhận thấy tham số cuối cùng là độ trễ - điều này cho phép bạn kích hoạt mọi thứ sau khi một sự kiện xảy ra. Dưới đây là một bản demo nhỏ hiển thị chức năng này
độ trễ chuyển tiếp
Điều này hoạt động bằng cách chỉ cần thêm độ trễ cho từng vòng kết nối khác nhau. Điều này dễ dàng như thêm một transition-delay: 0.6s; vào phần tử
Độ trễ nâng cao
Bạn có thể đặt cách các thuộc tính khác nhau tạo hiệu ứng khác nhau. Trong ví dụ này, vòng tròn bình thường (màu xanh) có CSS này (với tiền tố nhà cung cấp phù hợp)
#dd_main2 { transition: all 1s ease-in-out; }Thay vào đó, vòng tròn 'Ví dụ 1' (màu xanh lục) có CSS này
________số 8_______Trong khi vòng tròn 'Ví dụ 2' (màu đỏ) có CSS này thay thế
#dd_main2 { transition-property: top, left, border-radius, background-color; transition-duration: 2s, 1s, 0.5s, 0.5s; transition-delay: 0s, 0.5s, 1s, 1.5s; }Điều này cho phép chúng tôi tạo hoạt ảnh cho các thuộc tính độc lập với nhau, nghĩa là kỹ thuật đơn giản này có thể được sử dụng để tạo hoạt ảnh rất phức tạp
thuộc tính hoạt hình
Về các thuộc tính bạn có thể tạo hiệu ứng động, cách tốt nhất là thử nghiệm. W3C duy trì một danh sách các thuộc tính có thể được làm động trên. Chúng bao gồm mọi thứ từ màu nền và khoảng cách chữ cái đến bóng văn bản và chiều cao tối thiểu. Nhiều thuộc tính trong số này không được hoạt hình jQuery hỗ trợ theo mặc định, làm cho các chuyển đổi CSS trở nên hữu ích hơn nhiều. Ngoài ra, nhiều phần cứng của trình duyệt tăng tốc hoạt ảnh không yêu cầu vẽ lại, cụ thể là độ mờ, biến đổi 3D và bộ lọc. Để xem các phương thức mà Webkit tăng tốc, hãy xem AnimationBase. mã cpp từ nguồn Webkit. Tại thời điểm viết bài, có ba lớp được định nghĩa ở đây. PropertyWrapperAcceleratedOpacity, transition: [ || || || ] 0 và transition: [ || || || ] 1. Đây là những hình ảnh động mà Webkit tăng tốc. Các trình duyệt khác làm những việc khác nhau, nhưng vì Webkit phổ biến trên thiết bị di động, nơi những thứ này quan trọng nhất, nên cần lưu ý trường hợp đặc biệt này
Trên thực tế, các trình duyệt đang cho phép nhiều thuộc tính hơn những thuộc tính này được hoạt ảnh - transition: [ || || || ] 2 xuất hiện trong đầu như một ví dụ rõ ràng. Bảng bên dưới được lấy từ liên kết ở trên và có thể được coi là số lượng thuộc tính tối thiểu mà bạn mong muốn có thể hoạt ảnh được
Property NameTypetransition: [ || || || ] 3colortransition: [ || || || ] 4only gradientstransition: [ || || || ] 5percentage, lengthtransition: [ || || || ] 6colortransition: [ || || || ] 7lengthtransition: [ || || || ] 8colortransition: [ || || || ] 9color#dd_main2 { transition: all 1s ease-in-out; } 0length#dd_main2 { transition: all 1s ease-in-out; } 1color#dd_main2 { transition: all 1s ease-in-out; } 2length#dd_main2 { transition: all 1s ease-in-out; } 3length#dd_main2 { transition: all 1s ease-in-out; } 4color#dd_main2 { transition: all 1s ease-in-out; } 5length#dd_main2 { transition: all 1s ease-in-out; } 6length#dd_main2 { transition: all 1s ease-in-out; } 7length, percentage#dd_main2 { transition: all 1s ease-in-out; } 8color#dd_main2 { transition: all 1s ease-in-out; } 9rectangle#dd_main2 { transition-property: top, left; transition-duration: 1s, 1s; transition-delay: 0s, 1s; } 0length, percentage#dd_main2 { transition-property: top, left; transition-duration: 1s, 1s; transition-delay: 0s, 1s; } 1number#dd_main2 { transition-property: top, left; transition-duration: 1s, 1s; transition-delay: 0s, 1s; } 2various#dd_main2 { transition-property: top, left; transition-duration: 1s, 1s; transition-delay: 0s, 1s; } 3length, percentage#dd_main2 { transition-property: top, left; transition-duration: 1s, 1s; transition-delay: 0s, 1s; } 4length, percentage#dd_main2 { transition-property: top, left; transition-duration: 1s, 1s; transition-delay: 0s, 1s; } 5length#dd_main2 { transition-property: top, left; transition-duration: 1s, 1s; transition-delay: 0s, 1s; } 6number, length, percentage#dd_main2 { transition-property: top, left; transition-duration: 1s, 1s; transition-delay: 0s, 1s; } 7length#dd_main2 { transition-property: top, left; transition-duration: 1s, 1s; transition-delay: 0s, 1s; } 8length#dd_main2 { transition-property: top, left; transition-duration: 1s, 1s; transition-delay: 0s, 1s; } 9length#dd_main2 { transition-property: top, left, border-radius, background-color; transition-duration: 2s, 1s, 0.5s, 0.5s; transition-delay: 0s, 0.5s, 1s, 1.5s; } 0length#dd_main2 { transition-property: top, left, border-radius, background-color; transition-duration: 2s, 1s, 0.5s, 0.5s; transition-delay: 0s, 0.5s, 1s, 1.5s; } 1length, percentage#dd_main2 { transition-property: top, left, border-radius, background-color; transition-duration: 2s, 1s, 0.5s, 0.5s; transition-delay: 0s, 0.5s, 1s, 1.5s; } 2length, percentage#dd_main2 { transition-property: top, left, border-radius, background-color; transition-duration: 2s, 1s, 0.5s, 0.5s; transition-delay: 0s, 0.5s, 1s, 1.5s; } 3length, percentage#dd_main2 { transition-property: top, left, border-radius, background-color; transition-duration: 2s, 1s, 0.5s, 0.5s; transition-delay: 0s, 0.5s, 1s, 1.5s; } 4length, percentage#dd_main2 { transition-property: top, left, border-radius, background-color; transition-duration: 2s, 1s, 0.5s, 0.5s; transition-delay: 0s, 0.5s, 1s, 1.5s; } 5number#dd_main2 { transition-property: top, left, border-radius, background-color; transition-duration: 2s, 1s, 0.5s, 0.5s; transition-delay: 0s, 0.5s, 1s, 1.5s; } 6color#dd_main2 { transition-property: top, left, border-radius, background-color; transition-duration: 2s, 1s, 0.5s, 0.5s; transition-delay: 0s, 0.5s, 1s, 1.5s; } 7integer#dd_main2 { transition-property: top, left, border-radius, background-color; transition-duration: 2s, 1s, 0.5s, 0.5s; transition-delay: 0s, 0.5s, 1s, 1.5s; } 8length#dd_main2 { transition-property: top, left, border-radius, background-color; transition-duration: 2s, 1s, 0.5s, 0.5s; transition-delay: 0s, 0.5s, 1s, 1.5s; } 9length-ms-0length-ms-1length-ms-2length-ms-3length, percentage-ms-4length, percentage-ms-5shadow-ms-6length, percentage-ms-7keywords, length, percentage-ms-8visibility-ms-9length, percentage-ms-0length, percentage-ms-1integer-ms-2numberNgoài ra, tất cả các trình duyệt có chuyển đổi đều hỗ trợ chuyển đổi CSS hoạt ảnh, điều này chứng tỏ là vô giá