Đặt chuyển tiếp CSS3 thành none

Question

Tôi làm cách nào để chuyển đổi CSS không hoạt động bên trong truy vấn phương tiện hoặc trong bất kỳ trường hợp nào khác? Ví dụ:

@media (min-width: 200px) { 
    element { 
     transition: width 1s; 
    } 
} 

@media (min-width: 600px) { 
    element { 
     transition: none; // SET TO NO TRANSITION 
    } 
} 

Answer 1

Bạn có thể đặt thuộc tính chuyển tiếp thành none. Bằng cách này, sẽ không có hiệu ứng chuyển tiếp nào được áp dụng.

Như thế này:

-webkit-transition-property: none; 
-moz-transition-property: none; 
-o-transition-property: none; 
transition-property: none; 

Answer 2

transition: width 0s 

Nên làm các trick - như nó về cơ bản nói rằng có một sự chuyển tiếp, nhưng 0s là quá nhanh để xem nó!

Answer 3

Thậm chí tốt hơn so với thiết chuyển-tài sản để none được thiết chuyển tiếp thời gian để 0s.

Đây là mã cross-browser:

-webkit-transition-duration: 0s; 
-moz-transition-duration: 0s; 
-o-transition-duration: 0s; 
transition-duration: 0s; 

Tại sao điều này tốt hơn? Bởi vì, theo mặc định, các trình duyệt tuân thủ tiêu chuẩn (như Firefox) được đặt thuộc tính chuyển tiếp thành tất cả cho mỗi phần tử. Họ cũng đặt thời lượng chuyển đổi thành 0s. Do đó, bằng cách đặt thời lượng chuyển đổi thành 0s, bạn sẽ kết hợp chặt chẽ nhất cách trình duyệt xác định phần tử mà không cần chuyển đổi.

Thiết lập chuyển tiếp thời gian để mặc định 0s ám chỉ rằng chuyển-tài sản không thích hợp.