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

  • Artorius FullPower

    Artorius Ful

    29 Temmuz 2007
  • HowToBasic

    HowToBasic

    8 Aralık 2011
  • SHAYTARDS

    SHAYTARDS

    1 EKİM 2008