Przejście CSS z widocznością nie działa

Na skrzypcach poniżej mam osobne przejście na widoczność i krycie. Ta ostatnia działa, ale ta pierwsza nie. Ponadto, w przypadku widoczności, czas przejścia jest interpretowany jako opóźnienie w zawisie. Dzieje się zarówno w przeglądarce Chrome, jak i Firefox. Czy to błąd?

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

Przypadek 1:

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

Przypadek 2:

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

To nie jest błąd - możesz przejść tylko na właściwości porządkowe / obliczalne (prostym sposobem myślenia o tym jest dowolna właściwość z liczbową wartością początkową i końcową, chociaż jest kilka wyjątków).

Dzieje się tak, ponieważ przejścia działają poprzez obliczanie klatek kluczowych między dwiema wartościami i tworzenie animacji poprzez ekstrapolację wartości pośrednich.

visibility w tym przypadku jest to ustawienie binarne (widoczne / ukryte), więc gdy upłynie czas trwania przejścia, właściwość po prostu zmienia stan, widzisz to jako opóźnienie - ale w rzeczywistości można to postrzegać jako ostatnią klatkę kluczową animacji przejścia, z nie obliczono pośrednich klatek kluczowych (co składa się na wartości między ukrytymi a widocznymi? Nieprzezroczystość? Wymiar? Ponieważ nie jest to jednoznaczne, nie są one obliczane).

opacity to ustawienie wartości (0-1), więc klatki kluczowe mogą być obliczane przez podany czas trwania.

Listę właściwości, które można przenieść (animować) można znaleźć tutaj

Widoczność można animować. Sprawdź ten wpis na blogu o tym: http://www.greywyvern.com/?post=337

Możesz to również zobaczyć tutaj: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Powiedzmy, że masz menu, które chcesz pojawiać się i znikać po najechaniu myszą. Jeśli używasz opacity:0tylko, twoje przezroczyste menu nadal tam będzie i będzie animowane po najechaniu kursorem na niewidoczny obszar. Ale jeśli dodasz visibility:hidden, możesz wyeliminować ten problem:

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>

Widoczność jest animowaną właściwością zgodnie ze specyfikacją, ale przejścia w widoczności nie działają stopniowo, jak można by się spodziewać. Zamiast tego przejścia po opóźnieniu widoczności ukrywają element. Z drugiej strony, uczynienie elementu widocznym działa natychmiast. Dzieje się tak, jak jest to określone w specyfikacji (w przypadku domyślnej funkcji czasowej) i tak jak jest to zaimplementowane w przeglądarkach.

Jest to również przydatne zachowanie, ponieważ w rzeczywistości można sobie wyobrazić różne efekty wizualne, aby ukryć element. Zanikanie elementu to tylko jeden rodzaj efektu wizualnego określany za pomocą krycia. Inne efekty wizualne mogą odsunąć element za pomocą np. Właściwości transform, zobacz także http://taccgl.org/blog/css-transition-visibility.html

Często przydatne jest połączenie przejścia krycia z przejściem widoczności! Chociaż krycie wydaje się działać właściwie, w pełni przezroczyste elementy (z kryciem: 0) nadal otrzymują zdarzenia myszy. Tak więc np. Linki na elemencie, który został wygaszony przez samo przejście przez krycie, nadal reagują na kliknięcia (chociaż nie są widoczne), a linki za wyblakłym elementem nie działają (chociaż są widoczne przez wyblakły element). Zobacz http://taccgl.org/blog/css-transition-opacity-for-fade-effects.html .

Tego dziwnego zachowania można uniknąć, używając po prostu obu przejść, przejścia na widoczność i przejścia na krycie. W związku z tym właściwość visibility służy do wyłączania zdarzeń myszy dla elementu, podczas gdy krycie jest używane do efektu wizualnego. Należy jednak uważać, aby nie ukrywać elementu podczas odtwarzania efektu wizualnego, który w przeciwnym razie nie byłby widoczny. Tutaj przydaje się specjalna semantyka przejścia widoczności. W przypadku ukrycia elementu element pozostaje widoczny podczas odtwarzania efektu wizualnego, a następnie jest ukryty. Z drugiej strony przy ujawnianiu elementu przejście widoczności powoduje, że element staje się widoczny natychmiast, tj. Przed odtworzeniem efektu wizualnego.