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

102

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;
}
user4150760
źródło
4
Ten ostatni działa, ponieważ opacitymoże przybierać różne wartości od 0i 1, podczas gdy visibilitymoże być tylko visiblelub hidden(brak wartości pośrednie)
Fabrizio Calderan

Odpowiedzi:

148

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

SW4
źródło
7
dev.w3.org/csswg/css-transitions/#animtype-visibility określa, że ​​wartości pośrednie są odwzorowywane na „widoczne”.
Beni Cherniavsky-Paskin
@ BeniCherniavsky-Paskin - to zależy od funkcji pomiaru czasu: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
Odpowiedź SW4 jest myląca i nie wyjaśnia nieporozumień co do celu widoczności.
JesseMonroy650
@ JesseMonroy650 - chociaż wahałbym się przed obaleniem, jest to łatwiejsze bez dodatkowych dowodów na to twierdzenie, byłoby fascynujące, gdybyś mógł to rozwinąć? Program operacyjny nie pytał o cel widoczności (który różni się od wyświetlania, nieprzezroczystości), ale dlaczego nie może być animowany jako właściwość, mianowicie z podanego powodu - jest to faktycznie ustawienie włączania / wyłączania. Odpowiedź nie dotyczy tego, `` czym jest widoczność '', ale
SW4
Moglibyśmy się spierać co do znaczenia PO, ale sprzeciwiam się. Zirytowany ciągłym (niepełnym) tematem i niemożnością wykonania tej pracy, postanawiam to zbadać. Po pierwsze, warto zauważyć, że dokumentacja jest słaba ; wyjaśnienia są słabe, specyfikacja jest słabo napisana (redaktor też ma notatkę). Chociaż udokumentowane jako animatable, w rzeczywistości ma tylko kilka właściwości; jedną z tych właściwości jest czas . Wkrótce będę blogować.
JesseMonroy650
67

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>

Sevban Öztürk
źródło
2
To nie jest prawda. Artykuł wyraźnie pokazuje: 1: użytkownik
najeżdża myszką
5
A jednak artykuł osiąga funkcjonalny odpowiednik animowanej widoczności, zręcznie przechodząc do krycia. To dobrze wyjaśnia, dlaczego nadal musisz majstrować przy widoczności, aby móc klikać elementy „pod” ukrytym obiektem, na przykład za pomocą menu rozwijanego. Ale ta odpowiedź byłaby lepsza, gdyby zawierała przykład i podsumowanie lokalnie . (Łącza się psują; właśnie jeden naprawiłem.)
Bob Stein
ta odpowiedź jest trochę myląca, ale mimo to zadziałała, dzięki!
JaTo
2
@ BobStein-VisiBone Zredagowałem odpowiedź i podałem przykład. Dzięki za pomoc :)
Sevban Öztürk
20

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.

Helmut Emmelmann
źródło