CSS chuyển tiếp WebKit là gì?
|
Từ giữa đến cuối những năm 2000 dài và đẫm máu, nhưng giờ nó đã kết thúc. Ngay cả một số nhóm du kích vẫn đang lẩn trốn trong cây Internet, chúng ta sẽ nói về họ sau Show
Cuối cùng thì cuộc chiến này đã làm cho Internet thực sự tốt hơn và rõ ràng hơn, nhưng nó cũng để lại nhiều hệ lụy đáng trách mà chúng ta vẫn cảm nhận được cho đến ngày nay. Đặc biệt, đó là một sự không chắc chắn lớn giữa các nhà phát triển web về các tiêu chuẩn mà họ nên hoặc không nên sử dụng trong các tình huống khác nhau. “Mã tôi vừa viết có hoạt động bình thường trong tất cả các trình duyệt phổ biến nhất hay không?” Hoạt ảnh của thuộc tính CSS là ví dụ cổ điển về trường hợp như vậy. Sử dụng –moz-transition khi nào và ở đâu (-webkit-transition, -ms-transition, -o-transition, v.v. ) hay chỉ chuyển đổi riêng lẻ, cùng nhau hay thay thế? Sự phát triển tiêu chuẩn của Cascading Style SheetsĐặc tả CSS chính thức đầu tiên là CSS cấp 1, do W3C xuất bản vào tháng 12 năm 1996. Rất nhanh chóng, vào tháng 5 năm 1998, tiêu chuẩn CSS đã được mở rộng lên cấp độ 2 và nhóm bắt đầu làm việc với phiên bản mới, CSS 3. Ngày nay, sau 15 năm, công trình này vẫn chưa hoàn thành. Theo thời gian, đặc điểm kỹ thuật được chia thành nhiều tài liệu riêng biệt được gọi là "mô-đun", một số trong số đó đã trở thành tiêu chuẩn trong khi những tài liệu khác vẫn còn. Trong khi đó, các nhà cung cấp trình duyệt vẫn tiếp tục phát triển các tính năng mới theo cách riêng của họ và phát minh ra các tiêu chuẩn riêng của họ, khiến cộng đồng các nhà phát triển web ngày càng thất vọng. Để tạo điều kiện thuận lợi cho việc sử dụng các tiện ích mở rộng riêng tư này, một ngày nọ, họ đã đồng ý về một tiêu chuẩn trung gian có tên là "". -moz cho Mozilla (Gecko), -webkit cho Apple Safari và Google Chrome, -ms cho Microsoft Internet Explorer, -o cho Opera, v.v. Kể từ thời điểm này, Cascading Style Sheet thông thường trông giống như thế này IE5. 5-7 bộ lọccung cấp. DXImageTransform. Microsoft. Alpha(độ mờ=50) IE8 -ms-filter"progid. DXImageTransform. Microsoft. Alpha(Độ mờ=50)" mozilla 1. 6 -moz-opacity0. 5 Konqueror 3. 1, Safari 1. 1 -khtml-opacity0. 5 Safari 2. 0+, Chrome, Firefox, Opera độ mờ0. 5 tương thích ngược. css -moz-transition, css -webkit-transition và css –o-transitionThuộc tính –moz-transition, viết tắt của một tập hợp các thành phần riêng lẻ của quá trình chuyển đổi, là thuộc tính dành riêng cho nhà cung cấp Mozilla (Gecko), được Firefox hỗ trợ. Nó cho phép bạn đặt tất cả các tham số chuyển đổi trong một dòng mã theo định dạng sau -moz-transition [ thuộc tính ] [ thời lượng] [timing function] [delay] theo cách tương tự, thuộc tính -webkit-transition được hỗ trợ bởi trình duyệt Google Chrome và Safari và -o-transition được hỗ trợ bởi Opera Các giá trị của thuộc tính, thời lượng, hàm thời gian và độ trễ là phần giữ chỗ cho các giá trị của thuộc tính riêng lẻ sau -moz-transition-property-webkit-transition-property -o-transition-property chỉ định tên hoặc tên của các thuộc tính CSS mà quá trình chuyển đổi sẽ được áp dụng-moz-transition-duration -webkit-transition-duration -o-transition-durationspecifies the duration over which transitions should occur in seconds or milliseconds-moz-transition-timing-function -webkit-transition-timing-function -o-transition-timing-functionspecifies a function to define how intermediate values for properties are computed. There are 5 supported functions: "ease", "linear", "ease-out", "ease-in-out" and "cubic-bezier"-moz-transition-delay -webkit-transition-delay-webkit-transition-delay-o-transition-delaydefines how long to wait between the time a property is changed and the transition actually begins, in seconds or milliseconds -moz-transition-property chỉ định tên hoặc tên của các thuộc tính CSS mà các chuyển đổi sẽ được áp dụng -moz-transition-duration chỉ định khoảng thời gian mà quá trình chuyển đổi sẽ xảy ra tính bằng giây hoặc mili giây -moz-transition-timing-function chỉ định một hàm để xác định cách tính các giá trị trung gian cho các thuộc tính. Có 5 chức năng được hỗ trợ. "dễ", "tuyến tính", "dễ ra", "dễ vào" và "cubic-bezier" -moz-transition-delay xác định khoảng thời gian chờ giữa thời điểm một thuộc tính được thay đổi và quá trình chuyển đổi thực sự bắt đầu, tính bằng giây hoặc mili giây Thuộc tính chuyển đổi có thể là một tên thuộc tính chính xác như "màu nền", một danh sách các tên thuộc tính được phân tách bằng dấu phẩy như "chiều rộng, chiều cao, màu sắc, màu nền" hoặc chỉ "tất cả". Tham khảo bản nháp cuối cùng để biết danh sách đầy đủ các thuộc tính có thể hoạt hình Ví dụ về việc sử dụng –moz-transition giống như sau -moz-transition màu nền 2s dễ dàng ra vào 1s Trong trường hợp này, khi màu nền của một phần tử thay đổi (ví dụ: sử dụng JavaScript), thay đổi sẽ được tạo hiệu ứng động trong hai giây bằng cách sử dụng chức năng nhập dễ dàng và hoạt ảnh sẽ bắt đầu sau độ trễ một giây cách tiếp cận mới. chuyển tiếp CSS3 trên nhiều trình duyệtĐó là thời gian cho tin tốt. cuối cùng, tất cả các nhà cung cấp trình duyệt phổ biến nhất đã đồng ý sử dụng cùng một thuộc tính chuyển tiếp mà không có tiền tố nhà cung cấp như được định nghĩa trong tiêu chuẩn CSS3 và vào mùa thu năm 2013, sự hỗ trợ cho nó đã được thực hiện trong các trình duyệt. Bảng sau đây cho thấy thuộc tính chuyển đổi phiên bản được hỗ trợ đầy đủ từ IEFirefoxChromeSafariOpera10. 024. 029. 06. 117. 0IE-10. 0 firefox-24. 0 Chrome - 19. 0 Safari - 6. 1 Opera - 17. 0 Mặc dù vẫn nên giữ -moz-transition, -webkit-transition và -o-transition trong Cascading Style Sheets để tương thích ngược, nhưng trong quá trình phát triển trong tương lai, chúng ta có thể thở phào nhẹ nhõm và bắt đầu sử dụng một CSS transition duy nhất Định dạng của các thuộc tính chuyển đổi CSS3 khá giống với mô tả ở trên. Giống như -moz-transition, -webkit-transition và –o-transition, thuộc tính transition là cách viết tắt của một tập hợp các thành phần riêng lẻ của quá trình chuyển đổi chuyển đổi [ thuộc tính ] [ thời gian] [timing function] [delay] Các tham số hoàn toàn giống với các tham số tương ứng được mô tả ở trên. Vì vậy, để dịch ví dụ trước từ phiên bản CSS3 dành riêng cho trình duyệt sang phiên bản CSS3 dành cho nhiều trình duyệt, tất cả những gì chúng ta cần chỉ là xóa tất cả các tiền tố dành riêng cho nhà cung cấp chuyển tiếpmàu nền 2s dễ dàng ra vào 1s Chuyển đổi CSS bằng cách sử dụng lớp giả di chuộtCác chuyển đổi CSS phổ biến nhất được sử dụng với hover pseudo class. Cách tiếp cận này cho phép tạo nhiều thành phần giao diện người dùng đẹp mà không cần mã JavaScript hoặc jQuery. Hai ví dụ sau đây cho thấy làm thế nào nó có thể được thực hiện Ví dụ về nút chuyển tiếp CSSLet’s make a button. Instead of using the standard we’ll use an anchor element providing us with much more accurate control over its look and feel. In our example it will be just a link button. Of course, if you want to make a button with any other functionality you should add "onclick" event handler. Trước hết, chúng tôi viết lớp cho nút của chúng tôi trong Cascading Style Sheet .button {
} Chú ý đến thuộc tính chuyển đổi. Để đảm bảo độ mượt mà của hoạt ảnh, chúng tôi đặt các tham số thuộc tính chuyển tiếp thành "tất cả". Thời lượng hoạt ảnh là. 4s với chức năng ra vào dễ dàng và không có độ trễ Sau đó, chúng tôi xác định cách thuộc tính của nút sẽ thay đổi khi di chuột qua nó .button . di chuột {
} Cuối cùng, chúng tôi đặt một mỏ neo với lớp "nút" của chúng tôi vào HTML pa href# lớpbuttonMy Buttonap và đó là tất cả. Chúng ta có thể thấy nút của mình đang hoạt động Ví dụ về menu chuyển tiếpTheo cách tương tự, chúng ta có thể tạo menu điều hướng trang web. Để làm cho menu của chúng tôi nằm ngang, chúng tôi có thể sử dụng danh sách không có thứ tự với các mục nổi. Một lần nữa, trước hết chúng ta nên xác định tập hợp các lớp CSS. Lớp "menu" sẽ được áp dụng trên toàn bộ danh sách .menu {
} Sau đó, chúng tôi thêm các lớp cho các mục danh sách và neo bên trong menu .menu li {
}
.menu a {
} và tất nhiên là lớp giả di chuột cho các mục menu khi di chuột qua chúng .menu a: di chuột {
} Cuối cùng, chúng tôi đặt mã menu vào HTML ul lớpmenu
u và thực đơn của chúng tôi đã sẵn sàng Chuyển đổi với hình ảnhLớp giả di chuột rất hữu ích trên máy tính để bàn, nhưng nó vô nghĩa trên các thiết bị điều khiển bằng cảm ứng như máy tính bảng hoặc thiết bị di động. Vì vậy, điệu cười của chú mèo Cheshire trong ví dụ sau sẽ xuất hiện và biến mất khi bấm vào nút. Trong HTML, chúng tôi sẽ đặt hai nút có tên 'Hiển thị' và 'Ẩn' và hình ảnh, được đặt bên trong div có màu nền đen đầu vào idshowlaugh loạinút valueShow đầu vào idhidelaugh loạinút valueHide div kiểumàu nền. đen; . khối nội tuyến
Sau đó, chúng tôi cung cấp một lớp CSS cho hình ảnh của chúng tôi .laugh-image {
} Ban đầu độ mờ của nó được đặt thành 0, vì vậy hình ảnh bị ẩn. Lớp này cũng định nghĩa các tham số 'chuyển tiếp'. Hãy chú ý rằng 'thuộc tính chuyển đổi' ở đây được đặt cụ thể thành 'độ mờ'. Vì chỉ một thuộc tính của thành phần hình ảnh sẽ bị thay đổi nên không cần thiết phải sử dụng 'tất cả' như trong hai ví dụ trước Bây giờ hãy viết một số mã. Tôi đã thực hiện bằng cách sử dụng jQuery, nhưng lý do là nó cũng có thể được thực hiện bằng JavaScript đơn giản $ ( tài liệu ). sẵn sàng ( chức năng ( e) {
}); Mã này rất đơn giản và chứa hai trình xử lý nút. Khi nhấp vào nút 'Hiển thị', chúng tôi đặt kiểu 'độ mờ' của hình ảnh thành 1, để tiếng cười xuất hiện. Khi nhấp vào nút 'Ẩn', chúng tôi đặt độ mờ thành 0, vì vậy tiếng cười biến mất. Đó là tất cả Kiểm soát nâng cao quá trình chuyển đổi CSS bằng JavaScript/jQueryVí dụ cuối cùng vẫn có thể được thực hiện chỉ bằng CSS, nhưng đối với chức năng phức tạp hơn, chúng tôi chắc chắn cần một số mã kịch bản. Nếu chúng ta muốn tạo các chuỗi và vòng lặp hoạt hình và/hoặc thay đổi giá trị của các thuộc tính phần tử trong các chu kỳ vòng lặp khác nhau, chúng ta phải phát hiện điểm kết thúc quá trình chuyển đổi. Làm thế nào chúng ta có thể làm điều đó? Phát hiện việc hoàn thành hoạt ảnh chuyển tiếpĐó là một sự kiện được kích hoạt khi quá trình chuyển đổi hoàn tất. Sự kiện này được đặt tên là transitionend và nó cung cấp hai thuộc tính propertyNamea chuỗi chứa tên của thuộc tính CSS có quá trình chuyển đổi đã hoàn tấtelapsedTimea float chứa số giây mà quá trình chuyển đổi đã chạy vào thời điểm sự kiện được kích hoạttên tài sản một chuỗi chứa tên của thuộc tính CSS có quá trình chuyển đổi đã hoàn tất thời gian trôi qua một float chứa số giây mà quá trình chuyển đổi đã chạy vào thời điểm sự kiện được kích hoạt Xin lưu ý rằng sự kiện được chuyển đổi thường được kích hoạt riêng cho từng thuộc tính được chuyển đổi. Ví dụ: nếu chiều rộng và chiều cao của phần tử đã được chuyển đổi thì sự kiện được chuyển đổi sẽ được kích hoạt hai lần, một lần cho chiều rộng và một lần cho chiều cao Sự kiện chuyển tiếp không kích hoạt nếu quá trình chuyển đổi bị hủy bỏ do giá trị của thuộc tính hoạt ảnh bị thay đổi trước khi quá trình chuyển đổi hoàn tất Sử dụng phương thức addEventListener() để nhận sự kiện này như bình thường phần tử . addEventListener ( "transitionend" , EventHandlerName, true); Cho đến bây giờ mọi thứ đều đơn giản, nhưng… bạn đã quên các nhóm du kích chưa? . Mặc dù các trình duyệt hiện đại đã hỗ trợ tiêu chuẩn trên máy tính để bàn, nhưng trên nền tảng di động, một số trình duyệt không hỗ trợ. Ví dụ: Safari trên máy tính bảng của tôi không. Vì vậy, để đảm bảo rằng mã của chúng tôi sẽ hoạt động trên mọi nền tảng và trình duyệt, chúng tôi cũng phải sử dụng sự kiện dành riêng cho webkit có tên 'webkitTransitionEnd'. May mắn thay, các thuộc tính mà nó cung cấp hoàn toàn giống với các thuộc tính được cung cấp bởi sự kiện 'transitionend', vì vậy chúng ta có thể sử dụng cùng một chức năng xử lý Bây giờ hãy chuẩn bị một ví dụ Chuỗi hoạt ảnh chuyển tiếp và ví dụ về vòng lặpĐể minh họa việc sử dụng sự kiện transitionend, hãy tạo một vòng lặp hoạt hình vô hạn của phần tử div hình vuông. Mỗi chu kỳ lẻ trong ví dụ của chúng tôi, chúng tôi sẽ biến div thành hình tròn bằng cách đặt kiểu bán kính đường viền của nó thành một nửa kích thước phần tử và cứ sau mỗi chu kỳ chẵn, chúng tôi sẽ biến nó trở lại thành hình vuông. Ngoài ra, mỗi chu kỳ, chúng tôi sẽ đặt màu của div thành một giá trị ngẫu nhiên webkit trong CSS là gì?Thuật ngữ 'webkit' được sử dụng trong cú pháp CSS để hiển thị nội dung trong trình duyệt Safari và Chrome . Có thể cần thêm mã Webkit vào CSS để đảm bảo mã hiển thị chính xác trên Chrome và Safari do thiếu khả năng tương thích chéo.
Thuộc tính chuyển đổi webkit là gì?Thuộc tính chuyển tiếp chỉ định tên của thuộc tính CSS mà hiệu ứng chuyển tiếp dành cho (hiệu ứng chuyển tiếp sẽ bắt đầu khi CSS được chỉ định . Mẹo. Hiệu ứng chuyển tiếp thường có thể xảy ra khi người dùng di chuột qua một phần tử.
webkit trong hoạt hình CSS là gì?Tính năng phương tiện -webkit-animation là một Boolean có giá trị là true nếu các thuộc tính hoạt hình CSS có tiền tố của nhà cung cấp được hỗ trợ và trình duyệt hỗ trợ các truy vấn phương tiện thuộc tính có tiền tố.
Quá trình chuyển đổi Moz trong CSS là gì?moz là định dạng hoặc cú pháp firefox , trong khi bộ webkit dựa trên chrome và safari bất cứ khi nào chuyển đổi moz được áp dụng trong css, nó chủ yếu ảnh hưởng đến . |
