Nonaktifkan / matikan transisi CSS3 yang diwariskan

117

Jadi saya memiliki transisi css berikut yang dilampirkan ke elemen a:

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

Apakah ada cara untuk menonaktifkan transisi yang diwariskan ini pada elemen tertentu?

a.tags { transition: none; }

Sepertinya tidak melakukan pekerjaan itu.

css transitions css-transitions Scotty
sumber

Jawaban:

166

Penggunaan transition: nonetampaknya didukung (dengan penyesuaian khusus untuk Opera) dengan HTML berikut:

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

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

Demo JS Fiddle .

Diuji dengan Chromium 12, Opera 11.x, dan Firefox 5 di Ubuntu 11.04.

Adaptasi khusus untuk Opera adalah penggunaan -o-transition: color 0 ease-in;yang menargetkan properti yang sama seperti yang ditentukan dalam transitionaturan lain , tetapi menetapkan waktu transisi ke 0, yang secara efektif mencegah transisi agar tidak terlihat. Penggunaan a.noTransitionselektor hanya untuk menyediakan selektor tertentu untuk elemen tanpa transisi.

Diedit untuk mencatat bahwa jawaban @ Frédéric Hamidi , menggunakan all(untuk Opera, setidaknya) jauh lebih ringkas daripada mencantumkan setiap nama properti yang tidak ingin Anda transisi.

Demo JS Fiddle yang diperbarui, menunjukkan penggunaan alldi Opera -o-transition: all 0 none:, setelah jawaban @ Frédéric dihapus sendiri .

David mengatakan kembalikan Monica
sumber
Ahh, saya perlu menambahkan tag khusus browser sebelum transisi. Jahat, tepuk tangan!
Scotty
Terima kasih untuk opera tidak ada info transisi.
pedro_sland
5
Opera benar-benar membosankan dengan perbedaan ini
Junior Mayhé
1
mengapa Anda tidak bisa melakukan sesuatu seperti: transisi: tidak ada warna, warna latar belakang 0.1s kemudahan;
26

Jika Anda ingin menonaktifkan satu properti transisi, Anda dapat melakukan:

transition: color 0s;

(karena transisi nol detik sama dengan tanpa transisi.)

Will Madden
sumber
Pelaku kinerja mungkin tersinggung, tetapi ini tampaknya sah untuk menonaktifkan satu properti.
doublejosh
Tidak berfungsi untuk saya di Chrome sekarang. Ini hanya menonaktifkan semua transisi yang diwariskan.
Pembalikan
Bisakah Anda memberi contoh @Inversion
Will Madden
@WillMadden, di sini jsfiddle.net/312bu8po coba status awal dan kemudian hapus komentar pada baris yang disiapkan di css - transisi untuk leftakan dihapus.
Pembalikan
2

Cara lain untuk menghapus semua transisi adalah dengan unsetkata kunci:

a.tags {
    transition: unset;
}

Dalam kasus transition, unsetsama dengan initial, karena transitionbukan merupakan properti yang diwariskan:

a.tags {
    transition: initial;
}

Seorang pembaca yang mengetahui unsetdan initialdapat mengetahui bahwa solusi ini langsung benar, tanpa harus memikirkan sintaks spesifik transition.

Rory O'Kane
sumber
tidak disetel & awal tidak didukung dengan baik dengan IE
allenski
caniuse.com/#feat=css-unset-value - Saya mungkin akan menggunakan inisial jika Anda memerlukan dukungan IE11.
Nick Middleweek
0

Anda juga dapat membatalkan semua transisi di dalam elemen penampung:

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>
freeworlder
sumber
2
Hmm, saya mungkin tidak akan menyarankan melakukannya dengan cara ini. Aturan tidak berlaku untuk elemen tempat Anda menerapkan kelas, hanya anak-anak, dan itu berlaku untuk setiap anak, bahkan yang tidak memerlukan penerapan aturan, yang dapat menyebabkan masalah spesifisitas dan skalabilitas lebih jauh.
Scotty
Ini adalah solusi yang sangat berguna bagi saya baru-baru ini untuk menghapus transisi secara global dari elemen peta Google, yang menambahkan keanehan pada perilaku peta.
freeworlder