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

  • Avast

    Avast

    27 NİSAN 2006
  • Sergio Fernandez

    Sergio Ferna

    1 EKİM 2009
  • Vortez

    Vortez

    27 Temmuz 2009