Görünürlükle CSS geçişi çalışmıyor

Aşağıdaki keman, görünürlük ve opaklık konusunda ayrı ayrı bir geçiş yapıyorum. İkincisi işe yarıyor ama ilki çalışmıyor. Ayrıca, görünürlük durumunda, geçiş süresi, fareyle üzerine gelindiğinde gecikme olarak yorumlanır. Hem Chrome hem de Firefox'ta gerçekleşir. Bu bir hata mı?

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

Dava 1:

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

Durum 2:

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

Bu bir hata değildir - yalnızca sıralı / hesaplanabilir özelliklerde geçiş yapabilirsiniz (bunu düşünmenin kolay bir yolu, sayısal bir başlangıç ​​ve bitiş numarası değerine sahip herhangi bir özelliktir ... birkaç istisna olsa da).

Bunun nedeni, geçişlerin iki değer arasındaki anahtar kareleri hesaplayarak ve ara miktarları tahmin ederek bir animasyon oluşturarak çalışmasıdır.

visibility bu durumda ikili bir ayardır (görünür / gizli), bu nedenle geçiş süresi sona erdiğinde, özellik basitçe durumu değiştirir, bunu bir gecikme olarak görürsünüz - ancak aslında geçiş animasyonunun son ana karesi olarak görülebilir. ara anahtar kareler hesaplanmamış (gizli / görünür? Opaklık? Boyut? arasındaki değerleri oluşturan nedir? Açık olmadığı için hesaplanmaz).

opacity bir değer ayarıdır (0-1), bu nedenle anahtar kareler sağlanan süre boyunca hesaplanabilir.

Geçiş yapılabilir (canlandırılabilir) özelliklerin bir listesi burada bulunabilir

Görünürlük canlandırılabilir. Bununla ilgili şu blog gönderisine bakın: http://www.greywyvern.com/?post=337

Burada da görebilirsiniz: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Fareyle üzerine gelindiğinde açılıp kapanmasını istediğiniz bir menünüz olduğunu varsayalım. Yalnızca kullanırsanız opacity:0, şeffaf menünüz hala orada olacak ve görünmez alanın üzerine geldiğinizde hareket edecektir. Ancak eklerseniz visibility:hidden, bu sorunu ortadan kaldırabilirsiniz:

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>

Görünürlük, spesifikasyona göre canlandırılabilir bir özelliktir, ancak görünürlük üzerindeki geçişler beklenebileceği gibi kademeli olarak çalışmaz. Bunun yerine, bir öğeyi gizleyerek görünürlük gecikmesine geçiş yapar. Öte yandan, bir öğeyi görünür kılmak hemen işe yarar. Bu, spesifikasyon tarafından tanımlandığı gibidir (varsayılan zamanlama işlevi durumunda) ve tarayıcılarda uygulandığı şekildedir.

Bu aynı zamanda yararlı bir davranıştır, çünkü aslında bir öğeyi gizlemek için çeşitli görsel efektler hayal edilebilir. Bir öğeyi soldurmak, opaklık kullanılarak belirlenen yalnızca bir tür görsel efekttir. Diğer görsel efektler, örneğin dönüştürme özelliğini kullanarak öğeyi uzaklaştırabilir, ayrıca bkz. Http://taccgl.org/blog/css-transition-visibility.html

Opaklık geçişini bir görünürlük geçişiyle birleştirmek genellikle yararlıdır! Opaklık doğru olanı yapıyor gibi görünse de, tamamen şeffaf öğeler (opaklık: 0) yine de fare olaylarını alır. Örneğin, tek başına bir opaklık geçişiyle soluklaşan bir öğe üzerindeki bağlantılar, yine de tıklamalara yanıt verir (görünür olmasa da) ve soluk öğenin arkasındaki bağlantılar çalışmaz (soluk öğeden görülebilmesine rağmen). Bkz. Http://taccgl.org/blog/css-transition-opacity-for-fade-effects.html .

Bu garip davranış, sadece her iki geçiş, görünürlükte geçiş ve opaklıkta geçiş kullanılarak önlenebilir. Bu nedenle görünürlük özelliği, görsel efekt için opaklık kullanılırken öğe için fare olaylarını devre dışı bırakmak için kullanılır. Ancak görsel efekt oynatılırken, aksi takdirde görünmeyecek olan öğenin gizlenmemesine dikkat edilmelidir. Burada, görünürlük geçişinin özel semantiği kullanışlı hale gelir. Bir öğeyi gizlerken, öğe görsel efekt oynatılırken görünür durumda kalır ve daha sonra gizlenir. Öte yandan, bir öğeyi açığa çıkarırken, görünürlük geçişi, öğeyi anında, yani görsel efekti oynatmadan önce görünür kılar.