Vô hiệu hóa / tắt chuyển tiếp CSS3 được kế thừa

Vì vậy, tôi có các chuyển đổi css sau đây được gắn vào một phần tử:

a { 
     -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ;  
     -moz-transition:color 0.1s ease-in, background-color 0.1s ease-in;  
     -o-transition:color 0.1s ease-in, background-color 0.1s ease-in;  
     transition:color 0.1s ease-in, background-color 0.1s ease-in; 
}

Có cách nào để vô hiệu hóa các chuyển tiếp được kế thừa trên một yếu tố cụ thể không?

a.tags { transition: none; } 

Dường như không làm được việc.

Việc sử dụng transition: nonedường như được hỗ trợ (với một điều chỉnh cụ thể cho Opera) được cung cấp HTML sau:

<a href="#" class="transition">Content</a>
<a href="#" class="transition">Content</a>
<a href="#" class="noTransition">Content</a>
<a href="#" class="transition">Content</a>

... và CSS:

a {
    color: #f90;
    -webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;  
    -moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    -o-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    transition:color 0.8s ease-in, background-color 0.1s ease-in; 
}
a:hover {
    color: #f00;
    -webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;  
    -moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    -o-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    transition:color 0.8s ease-in, background-color 0.1s ease-in; 
}
a.noTransition {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}

Bản demo của Fiddle .

Đã thử nghiệm với Chromium 12, Opera 11.x và Firefox 5 trên Ubuntu 11.04.

Sự thích ứng cụ thể với Opera là việc sử dụng -o-transition: color 0 ease-in;nhắm mục tiêu vào cùng một thuộc tính như được chỉ định trong các transitionquy tắc khác , nhưng đặt thời gian chuyển đổi thành 0, điều này ngăn chặn hiệu quả quá trình chuyển đổi không đáng chú ý. Việc sử dụng a.noTransitionbộ chọn chỉ đơn giản là cung cấp một bộ chọn cụ thể cho các phần tử mà không có chuyển tiếp.

Đã chỉnh sửa để lưu ý rằng câu trả lời của @ Frédéric Hamidi , sử dụngall (ít nhất là cho Opera) ngắn gọn hơn nhiều so với việc liệt kê ra từng tên thuộc tính riêng lẻ mà bạn không muốn chuyển đổi.

Bản cập nhật JS Fiddle đã cập nhật, hiển thị việc sử dụng alltrong Opera :-o-transition: all 0 none , sau khi tự xóa câu trả lời của @ Frédéric .

Nếu bạn muốn vô hiệu hóa một thuộc tính chuyển tiếp, bạn có thể làm:

transition: color 0s;

(vì quá trình chuyển đổi 0 giây giống như không có quá trình chuyển đổi.)

Một cách khác để loại bỏ tất cả các chuyển đổi là với unsettừ khóa:

a.tags {
    transition: unset;
}

Trong trường hợp transition, unsettương đương với initial, vì transitionkhông phải là một tài sản được thừa kế:

a.tags {
    transition: initial;
}

Một người đọc biết unsetvà initialcó thể nói rằng các giải pháp này là chính xác ngay lập tức, mà không phải suy nghĩ về cú pháp cụ thể của transition.

Bạn cũng có thể từ chối tất cả các chuyển đổi bên trong một phần tử có chứa:

CSS:

.noTrans *{
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}

HTML:

<a href="#">Content</a>
<a href="#">Content</a>
<div class="noTrans">
<a href="#">Content</a>
</div>
<a href="#">Content</a>

Dựa trên giá trị chuyển đổi mặc định của W3schools là : all 0s ease 0s, nên là cách tương thích giữa nhiều trình duyệt để vô hiệu hóa quá trình chuyển đổi.

Đây là một liên kết: https://www.w3schools.com/cssref/css3_pr_transition.asp