Transisi CSS dengan visibilitas tidak berfungsi


102

Di biola di bawah ini, saya memiliki transisi pada visibilitas dan opasitas secara terpisah. Yang terakhir berfungsi tetapi yang pertama tidak. Selain itu, dalam kasus visibilitas, waktu transisi diartikan sebagai penundaan saat melayang keluar. Terjadi di Chrome & Firefox. Apakah ini bug?

http://jsfiddle.net/0r218mdo/3/

Kasus 1:

#inner{
    visibility:hidden;
    transition:visibility 1000ms;
}
#outer:hover #inner{
    visibility:visible;
}

Kasus 2:

#inner1{
    opacity:0;
    transition:opacity 1000ms;
}
#outer1:hover #inner1{
    opacity:1;
}

4
yang terakhir berfungsi karena opacitydapat mengambil beberapa nilai antara 0dan 1, sementara visibilityhanya dapat visibleatau hidden(tidak ada nilai perantara)
Fabrizio Calderan

Jawaban:


148

Ini bukan bug - Anda hanya dapat melakukan transisi pada properti ordinal / yang dapat dihitung (cara mudah untuk memikirkan ini adalah properti apa pun dengan nilai bilangan awal dan akhir numerik .. meskipun ada beberapa pengecualian).

Ini karena transisi bekerja dengan menghitung bingkai utama di antara dua nilai , dan menghasilkan animasi dengan mengekstrapolasi jumlah perantara.

visibility dalam hal ini adalah pengaturan biner (terlihat / tersembunyi), jadi setelah durasi transisi berlalu, properti akan beralih status, Anda melihatnya sebagai penundaan- tetapi sebenarnya dapat dilihat sebagai bingkai utama terakhir dari animasi transisi, dengan bingkai utama perantara belum dihitung (apa yang membentuk nilai antara tersembunyi / terlihat? Opasitas? Dimensi? Karena tidak eksplisit, mereka tidak dihitung).

opacity adalah setelan nilai (0-1), sehingga bingkai utama dapat dihitung selama durasi yang disediakan.

Daftar properti yang dapat dialihkan (dapat dianimasikan) dapat ditemukan di sini


7
dev.w3.org/csswg/css-transitions/#animtype-visibility menetapkan bahwa nilai perantara dipetakan ke "terlihat".
Beni Cherniavsky-Paskin

@ BeniCherniavsky-Paskin - ini tergantung pada fungsi waktu:other values of the timing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with Y values outside of [0, 1]) map to the closer endpoint
SW4

1
Tanggapan SW4 menyesatkan, dan tidak menjelaskan kesalahpahaman tentang tujuan visibilitas.
JesseMonroy650

@ JesseMonroy650 - meskipun saya ragu-ragu untuk membantah, lebih mudah melakukannya tanpa bukti tambahan untuk klaim yang diberikan, akan menarik jika Anda dapat menjelaskan lebih lanjut? OP tidak menanyakan tujuan visibilitas (yang berbeda dengan tampilan, opacity) tetapi mengapa tidak dapat dianimasikan sebagai properti, yaitu karena alasan yang diberikan- ini adalah pengaturan on / off yang efektif. Jawabannya tidak membahas 'apa itu visibilitas' tetapi 'mengapa tidak dapat dianimasikan'
SW4

Kita bisa berdalih tentang arti OP, tapi saya akan membalasnya. Terganggu oleh tema yang konstan (tidak lengkap) dan ketidakmampuan untuk membuat ini berhasil, saya memutuskan untuk menyelidikinya. Pertama, perlu dicatat bahwa dokumentasinya buruk ; penjelasannya buruk, spesifikasi ditulis dengan buruk (editor juga memberi catatan). Meskipun didokumentasikan sebagai animatable, pada kenyataannya ia memiliki sedikit properti; salah satu properti itu adalah waktu . Saya akan segera ngeblog.
JesseMonroy650

67

Visibilitas bisa dianimasikan. Periksa posting blog ini tentang itu: http://www.greywyvern.com/?post=337

Anda juga dapat melihatnya di sini: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Katakanlah Anda memiliki menu yang ingin Anda fade-in dan fade-out pada mouse hover. Jika Anda opacity:0hanya menggunakan , menu transparan Anda akan tetap ada dan akan beranimasi saat Anda mengarahkan kursor ke area yang tidak terlihat. Tetapi jika Anda menambahkan visibility:hidden, Anda dapat menghilangkan masalah ini:

div {
    width:100px;
    height:20px;
}
.menu {
    visibility:hidden;
    opacity:0;
    transition:visibility 0.3s linear,opacity 0.3s linear;
    
    background:#eee;
    width:100px;
    margin:0;
    padding:5px;
    list-style:none;
}
div:hover > .menu {
    visibility:visible;
    opacity:1;
}
<div>
  <a href="#">Open Menu</a>
  <ul class="menu">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
</div>


2
Ini tidak benar. Artikel tersebut dengan jelas menunjukkan: 1: Mouse pengguna di atas elemen 2: visibilitas dialihkan ke terlihat 3: animasi transisi opasitas dimulai
Ben Racicot

5
Namun, artikel tersebut mencapai fungsi yang setara dengan visibilitas animasi, dengan beralih ke opasitas secara cekatan. Ini menjelaskan dengan baik mengapa Anda masih perlu mengutak-atik visibilitas agar dapat mengklik hal-hal "di bawah" objek tersembunyi, seperti dengan menu drop-down. Tetapi jawaban ini akan lebih baik jika memberikan contoh dan ringkasan secara lokal . (Tautan rusak; Saya baru saja memperbaikinya.)
Bob Stein

jawaban ini agak menyesatkan, tapi tetap saja berhasil, terima kasih!
JaTo

2
@ BobStein-VisiBone Saya mengedit jawaban saya dan memberikan contoh. Terima kasih atas bantuan Anda :)
Sevban Öztürk

20

Visibilitas adalah properti yang dapat dianimasikan menurut spesifikasi, tetapi transisi pada visibilitas tidak bekerja secara bertahap, seperti yang diharapkan. Alih-alih transisi pada penundaan visibilitas menyembunyikan elemen. Di sisi lain, membuat elemen terlihat bekerja dengan segera. Ini seperti yang didefinisikan oleh spesifikasi (dalam kasus fungsi pengaturan waktu default) dan seperti yang diterapkan di browser.

Ini juga merupakan perilaku yang berguna, karena sebenarnya orang dapat membayangkan berbagai efek visual untuk menyembunyikan suatu elemen. Memudarkan elemen hanyalah salah satu jenis efek visual yang ditentukan menggunakan opasitas. Efek visual lainnya mungkin memindahkan elemen menggunakan misalnya properti transformasi, lihat juga http://taccgl.org/blog/css-transition-visibility.html

Seringkali berguna untuk menggabungkan transisi opasitas dengan transisi visibilitas! Meskipun opacity tampaknya melakukan hal yang benar, elemen yang sepenuhnya transparan (dengan opacity: 0) masih menerima peristiwa mouse. Jadi misalnya tautan pada elemen yang memudar dengan transisi opasitas saja, masih merespons klik (meskipun tidak terlihat) dan tautan di belakang elemen yang memudar tidak berfungsi (meskipun terlihat melalui elemen yang memudar). Lihat http://taccgl.org/blog/css-transition-opacity-for-fade-effects.html .

Perilaku aneh ini dapat dihindari dengan hanya menggunakan kedua transisi, transisi pada visibilitas, dan transisi pada opasitas. Dengan demikian, properti visibilitas digunakan untuk menonaktifkan peristiwa mouse untuk elemen tersebut sementara opasitas digunakan untuk efek visual. Namun, kehati-hatian harus dilakukan untuk tidak menyembunyikan elemen saat efek visual diputar, yang jika tidak, tidak akan terlihat. Di sini semantik khusus dari transisi visibilitas menjadi berguna. Saat menyembunyikan elemen, elemen tetap terlihat saat memutar efek visual dan disembunyikan setelahnya. Di sisi lain saat menampilkan sebuah elemen, transisi visibilitas membuat elemen tersebut langsung terlihat, yaitu sebelum memainkan efek visual.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.