Sepertinya saya tidak dapat menemukan sintaks yang benar untuk singkatan transisi CSS dengan beberapa properti. Ini tidak melakukan apa-apa:
.element {
-webkit-transition: height .5s, opacity .5s .5s;
-moz-transition: height .5s, opacity .5s .5s;
-ms-transition: height .5s, opacity .5s .5s;
transition: height .5s, opacity .5s .5s;
height: 0;
opacity: 0;
overflow: 0;
}
.element.show {
height: 200px;
opacity: 1;
}
Saya menambahkan kelas pertunjukan dengan javascript. Elemen menjadi lebih tinggi dan terlihat, hanya saja tidak transisi. Menguji Chrome, FF, dan Safari terbaru.
Apa yang saya lakukan salah?
EDIT: Untuk memperjelas, saya mencari versi singkat untuk menurunkan CSS saya. Sudah cukup kembung dengan semua awalan vendor. Juga memperluas kode contoh.
css
webkit
css-transitions
shorthand
Gregory Bolkenstijn
sumber
sumber
.5s
setelahopacity
dimaksudkan?Jawaban:
Sintaksis:
Perhatikan bahwa durasi harus datang sebelum penundaan, jika yang terakhir ditentukan.
Transisi individual digabungkan dalam deklarasi steno:
Atau cukup transisikan semuanya:
Ini adalah contoh sederhana . Ini satu lagi dengan properti delay .
Sunting: sebelumnya terdaftar di sini adalah kompatibilitas dan masalah yang diketahui tentang
transition
. Dihapus untuk dibaca.Intinya: gunakan saja. Sifat properti ini tidak melanggar untuk semua aplikasi dan kompatibilitas sekarang jauh di atas 94% secara global.
Jika Anda masih ingin memastikan, lihat http://caniuse.com/css-transitions
sumber
all
daripada mendaftar properti tertentu? Misalnya, jika saya berencana untuk transisibackground
dancolor
hanya - apakah saya lebih baik menentukan keduanya, atau hanya menggunakanall
? Juga - mengingat bahwa IE6-9 tidak mendukung transisi, dan IE10 mendukung mereka tidak diperbaiki - apakah ada sisi positif / negatif untuk memasukkanms-transition:
arahan?ms-transition
, saya tidak tahu alasan apa pun, sekarang setelah IE10 keluar, mengapa ada orang yang masih menggunakanms-transition
standartransition
. Ini tidak akan menyebabkan masalah untuk memiliki keduanya, tetapi akan, terutama pada stylesheet transisi-berat, mengasapi CSS Anda. Lebih penting lagi, ukuran file juga akan terkena dampak.Jika Anda memiliki beberapa properti spesifik yang ingin Anda transisikan dengan cara yang sama (karena Anda juga memiliki beberapa properti yang tidak ingin Anda transisikan, katakanlah
opacity
), opsi lain adalah melakukan sesuatu seperti ini (awalan dihilangkan karena singkatnya):Deklarasi kedua mengesampingkan deklarasi
all
steno di atasnya dan membuat (kadang-kadang) kode yang lebih ringkas.Demo
sumber
transition-property
override, tetapi juga karena misalnyatransition-delay
perlu ditentukan setelah steno (setidaknya di webkit). Dengan kata lain steno menyiratkan atransition-delay
dari 0 dan menempatkan penundaan mandiri sebelum steno menetapkannya kembali menjadi 0.transition: [props] [duration] [easing] [delay]
di setiap browser modernSaya yang bekerja dengan ini:
sumber
Dengan keterlambatan 0,5 pada transisi properti opacity, elemen akan sepenuhnya transparan (dan dengan demikian tidak terlihat) sepanjang waktu tingginya transisi. Jadi satu-satunya hal yang akan Anda lihat adalah opacity berubah. Jadi, Anda akan mendapatkan efek yang sama dengan meninggalkan properti tinggi dari transisi:
"transisi: opacity .5s .5s;"
Itukah yang kamu inginkan? Jika tidak, dan Anda ingin melihat transisi ketinggian, Anda tidak dapat memiliki opacity nol sepanjang waktu transisi.
sumber
Ini membantu saya memahami / merampingkan, hanya yang saya butuhkan untuk menghidupkan:
~ Ini berlaku untuk semua properti transisi (durasi, fungsi-waktu-transisi, dll.) Dalam kelas '.base'
sumber
Saya pikir itu bekerja dengan ini:
sumber