Transisi CSS dengan visibilitas tidak berfungsi

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

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

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>

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.