Singkatan transisi CSS dengan beberapa properti?

519

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.

Gregory Bolkenstijn
sumber
2
Periksa dokumentasi ini. developer.mozilla.org/en/CSS/CSS_transitions
websymphony
3
Apakah Anda benar-benar mengubah nilai tinggi dan opacity? Kalau tidak, mereka tidak berubah
yunzen
Saya tidak terlalu berpengalaman dengan transisi CSS - apakah nilai ganda .5ssetelah opacitydimaksudkan?
BoltClock
Dokumentasi tidak memberikan contoh untuk menggunakan versi steno dengan beberapa properti. Tinggi berubah dari 0 hingga 200px, opacity dari 0 ke 1. .5s kedua adalah penundaan pada transisi opacity. Saya ingin elemen bertambah tinggi, dan ketika itu selesai, pudar.
Gregory Bolkenstijn
2
Ah ya, nilai penundaannya.
BoltClock

Jawaban:

752

Sintaksis:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

Perhatikan bahwa durasi harus datang sebelum penundaan, jika yang terakhir ditentukan.

Transisi individual digabungkan dalam deklarasi steno:

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

Atau cukup transisikan semuanya:

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

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

Rémi Breton
sumber
1
Sudahkah Anda mencoba ini? Itu tidak bekerja untuk saya. Saya juga tidak dapat menggunakan semua properti karena saya memiliki penundaan pada properti kedua.
Gregory Bolkenstijn
3
Apakah ada kinerja / memori / implikasi lain untuk menggunakan alldaripada mendaftar properti tertentu? Misalnya, jika saya berencana untuk transisi backgrounddan colorhanya - apakah saya lebih baik menentukan keduanya, atau hanya menggunakan all? Juga - mengingat bahwa IE6-9 tidak mendukung transisi, dan IE10 mendukung mereka tidak diperbaiki - apakah ada sisi positif / negatif untuk memasukkan ms-transition:arahan?
mattstuehler
9
Jelas ada dampak kinerja ketika mentransisikan semua properti alih-alih hanya yang Anda butuhkan. Ini dapat menyebabkan kerusakan serius jika Anda memiliki banyak elemen yang mentransisikan semua properti secara bersamaan. Tentang ms-transition, saya tidak tahu alasan apa pun, sekarang setelah IE10 keluar, mengapa ada orang yang masih menggunakan ms-transitionstandar transition. 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.
Rémi Breton
3
Saya memiliki masalah yang sama dan tampaknya menggunakan "transisi: opacity 1s .5s, max-tinggi .5s 0" tidak berfungsi sementara "transisi: opacity 1s .5s, max-tinggi .5s 0s" adalah. Pertama kali saya melihat unit yang dibutuhkan untuk nilai nol di css!
mlarcher
5
Perlu disebutkan bahwa menggunakan 'semua' lebih lambat daripada menentukan properti tertentu.
Nathan
433

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):

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

Deklarasi kedua mengesampingkan deklarasi allsteno di atasnya dan membuat (kadang-kadang) kode yang lebih ringkas.

/* prefixes omitted for brevity */
.box {
    height: 100px;
    width: 100px;
    background: red;
    box-shadow: red 0 0 5px 1px;
    transition: all 500ms ease;
    /*note: not transitioning width */
    transition-property: height, background, box-shadow;
}

.box:hover {
  height: 50px;
  width: 50px;
  box-shadow: blue 0 0 10px 3px;
  background: blue;
}
<p>Hover box for demo</p>
<div class="box"></div>

Demo

Jason
sumber
4
Ini berguna! Bukan hanya karena transition-propertyoverride, tetapi juga karena misalnya transition-delayperlu ditentukan setelah steno (setidaknya di webkit). Dengan kata lain steno menyiratkan a transition-delaydari 0 dan menempatkan penundaan mandiri sebelum steno menetapkannya kembali menjadi 0.
duncanwilcox
@duncanwilcox dapat Anda lakukan transition: [props] [duration] [easing] [delay] di setiap browser modern
Jason
9
Lebih suka jawaban ini JAUH lebih banyak daripada jawaban yang diterima.
Erutan409
3
menyenangkan! sangat suka pendekatannya!
wasddd_
36

Saya yang bekerja dengan ini:

element{
   transition : height 3s ease-out, width 5s ease-in;
}
AhbapAldirmaz
sumber
Inilah yang saya cari - singkatan untuk beberapa properti. Terima kasih!
Adam Moisa
2

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.

JB
sumber
Ini tidak berfungsi, karena ketinggian akan tetap 0 selama transisi opacity.
Xesau
0

Ini membantu saya memahami / merampingkan, hanya yang saya butuhkan untuk menghidupkan:

// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}

.base {
  max-width: 0vw;
  opacity: 0;

  transition-property: max-width, opacity; // relative order
  transition-duration: 2s, 4s; // effects relatively ordered animation properties
  transition-delay: 6s; // effects delay of all animation properties
  animation-timing-function: ease;

  &:hover {
    max-width: 100vw;
    opacity: 1;

    transition-duration: 5s; // effects duration of all aniomation properties
    transition-delay: 2s, 7s; // effects relatively ordered animation properties
  }
}

~ Ini berlaku untuk semua properti transisi (durasi, fungsi-waktu-transisi, dll.) Dalam kelas '.base'

gav_aus_web
sumber
-4

Saya pikir itu bekerja dengan ini:

element{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
Thomas Lamothe
sumber