SORU
9 Temmuz 2011, CUMARTESİ


Devre dışı bırakmak/miras CSS3 geçişleri kapatın

Aşağıdaki css geçişler bir öğe bağlı olmalıdır?

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

Bir şekilde belirli bir element bu kalıtsal geçişler devre dışı bırakmak için var mı?

a.tags { transition: none; } 

İş yapmak gibi görünmüyor

CEVAP
9 Temmuz 2011, CUMARTESİ


transition: none kullanımı desteklenen (Opera için belirli bir ayarlama ile) aşağıdaki HTML vermiş gibi görünüyor:

<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 demo.

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

Belirli bir adaptasyon için ideal kullanım -o-transition: color 0 ease-in; hedeflere de aynı özelliği olarak belirtilen diğer transition kurallar, ama ayarlar geçiş süresi 0, hangi etkili bir şekilde engeller geçiş olması dikkat çekici. a.noTransition seçici kullanımı basit geçişler olmadan elementleri için belirli bir seçici sağlamaktır.

< / ^ hr .

Düzenlenmiş@Frédéric Hamidi's answer, all kullanarak (Opera için en azından) geçiş yapmak istemediğiniz özellik-adı her birey liste çok daha kısa olduğunu unutmayın.

@Frédéric'In cevabı. kendi kendine silinmesi aşağıdaki Updated JS Fiddle demo, showing the use of all in Opera: -o-transition: all 0 none,

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Amir Parmar

    Amir Parmar

    25 Kasım 2010
  • Chuck Testa

    Chuck Testa

    14 AĞUSTOS 2011
  • SerienTrailerMP

    SerienTraile

    7 HAZİRAN 2012