Devralınan CSS3 geçişlerini devre dışı bırakın / kapatın

Bu yüzden a öğesine ekli aşağıdaki css geçişlerine sahibim:

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; 
}

Belirli bir öğede bu devralınan geçişleri devre dışı bırakmanın bir yolu var mı?

a.tags { transition: none; } 

İşi yapıyor gibi görünmüyor.

transition: noneAşağıdaki HTML ile kullanımı destekleniyor (Opera için özel bir ayarlama ile):

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

... ve 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;
}

JS Fiddle demosu .

Ubuntu 11.04'te Chromium 12, Opera 11.x ve Firefox 5 ile test edilmiştir.

Opera'ya özel adaptasyon -o-transition: color 0 ease-in;, diğer transitionkurallarda belirtilen aynı özelliği hedefleyen , ancak geçiş zamanını ayarlayan 0, bu da geçişin farkedilebilir olmasını etkin bir şekilde engelleyen kullanımdır. a.noTransitionSeçicinin kullanımı, geçişler olmadan öğeler için belirli bir seçici sağlamaktır.

Düzenlenen bu nota Frédéric Hamidi cevabı @ kullanılarak all(en azından, Opera için) Eğer geçişe sahip olduğu istemediklerini her mülk adını listeleyen çok daha özlü.

all-o-transition: all 0 none@ Frédéric'in cevabının kendi kendini silmesinin ardından Opera: 'nın kullanımını gösteren güncellenmiş JS Fiddle demosu .

Tek bir geçiş özelliğini devre dışı bırakmak istiyorsanız şunları yapabilirsiniz:

transition: color 0s;

(sıfır saniyelik geçiş, geçiş olmamasıyla aynı olduğundan.)

Tüm geçişleri kaldırmanın başka bir yolu da unsetanahtar kelimedir:

a.tags {
    transition: unset;
}

Durumunda transition, unseteşdeğerdir initialçünkü transitionbir miras özelliği değildir:

a.tags {
    transition: initial;
}

Belirli sözdizimi hakkında düşünmek zorunda kalmadan, bu çözümlerin doğru olduğunu bilen unsetve initialhemen söyleyebilen bir okuyucu transition.

Ayrıca, içeren bir öğenin içindeki tüm geçişleri miras bırakabilirsiniz:

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>

W3schools'a göre varsayılan geçiş değeri: all 0s ease 0sgeçişi devre dışı bırakmanın tarayıcılar arası uyumlu bir yol olmalıdır.

İşte bir bağlantı: https://www.w3schools.com/cssref/css3_pr_transition.asp