Chuyển tiếp CSS3: Chuyển đổi: tất cả "chậm hơn" chuyển đổi: x "?

Question

Tôi có câu hỏi về tốc độ hiển thị cho thuộc tính chuyển tiếp css3.

Giả sử tôi có một số yếu tố:

div, span, a {transition: all} 

div {margin: 2px} 
span {opacity: .5} 
a:hover {background-position: left top} 

div:hover {margin: -100px} 
span:hover {opacity: 1} 
a:hover {background-position: -5px top} 

Đó là hiệu quả hơn để nhắm mục tiêu tất cả các hiệu ứng chuyển tiếp cho tất cả những yếu tố sử dụng một tuyên bố div, span, a {transition: all}. Nhưng câu hỏi của tôi là: liệu nó có "nhanh hơn" về độ mượt và độ nhanh của hoạt ảnh dựng hình để nhắm mục tiêu thuộc tính chuyển tiếp cụ thể của từng phần tử không? Ví dụ:

div {margin: 2px; transition: margin .2s ease-in} 
span {opacity: .5; transition: opacity .2s ease-in} 
a {background-position: left top; transition: background .2s ease-in} 

div:hover {margin: -100px} 
span:hover {opacity: 1} 
a:hover {background-position: -5px top} 

Logic của tôi trong yêu cầu này là nếu css "động cơ" có để tìm kiếm "tất cả" thuộc tính chuyển đổi ngay cả khi chỉ có một tài sản duy nhất cho một phần tử, mà nó có thể làm chậm điều xuống .

Có ai biết nếu đó là trường hợp không? Cảm ơn!

Answer 1

Có, sử dụng transition: all có thể gây ra những hạn chế lớn về hiệu suất. Có thể có rất nhiều trường hợp trình duyệt sẽ xem xét nếu nó cần thực hiện chuyển đổi, ngay cả khi người dùng không nhìn thấy nó, như thay đổi màu sắc, thay đổi kích thước, v.v.

Ví dụ đơn giản nhất tôi có thể nghĩ là điều này: http://dabblet.com/gist/1657661 - cố gắng thay đổi mức thu phóng hoặc kích thước của phông chữ và bạn sẽ thấy mọi thứ trở nên hoạt hình. Tất nhiên không thể có nhiều tương tác người dùng như vậy, nhưng có thể có một số thay đổi giao diện có thể gây ra chỉnh lưu và sơn lại trong một số khối, điều đó có thể cho trình duyệt thử và làm sống động những thay đổi đó.

Vì vậy, nói chung, bạn nên sử dụng transition: all và sẽ sử dụng chuyển tiếp trực tiếp thay thế.

Có một số thứ khác có thể xảy ra với quá trình chuyển đổi all, giống như hình ảnh động khi tải trang, lúc đầu nó sẽ hiển thị kiểu ban đầu cho khối và sau đó áp dụng kiểu với hoạt ảnh. Trong nhiều trường hợp, đó không phải là thứ bạn muốn :)

Answer 2

Tôi đã sử dụng all cho những trường hợp tôi cần tạo hiệu ứng cho nhiều quy tắc. Ví dụ: nếu tôi muốn thay đổi color & background-color trên :hover.

Nhưng hóa ra bạn có thể nhắm mục tiêu nhiều quy tắc cho quá trình chuyển đổi, vì vậy bạn không bao giờ cần để đặt đến cài đặt all.

.nav a { 
    transition: color .2s, text-shadow .2s; 
}