Pytanie Przejście CSS z `display: none` na zmianę klasy?


Zacząłem używać przejść, aby "zmodernizować" atmosferę witryny. Jak dotąd, :hover przejścia działają dobrze. Teraz zastanawiam się, czy możliwe jest wywołanie przejścia na podstawie innych rzeczy, na przykład w przypadku zmiany klasy.

Oto odpowiedni CSS:

#myelem {
    opacity: 0;
    display: none;
    transition: opacity 0.4s ease-in, display 0.4s step-end;
    -ms-transition: opacity 0.4s ease-in, display 0.4s step-end;
    -moz-transition: opacity 0.4s ease-in, display 0.4s step-end;
    -webkit-transition: opacity 0.4s ease-in, display 0.4s step-end;
}
#myelem.show {
    display: block;
    opacity: 1;
    transition: opacity 0.4s ease-out, display 0.4s step-start;
    -ms-transition: opacity 0.4s ease-out, display 0.4s step-start;
    -moz-transition: opacity 0.4s ease-out, display 0.4s step-start;
    -webkit-transition: opacity 0.4s ease-out, display 0.4s step-start;
}

JavaScript, który uruchamia zmianę, to:

document.getElementById('myelem').className = "show";

Ale przejście wydaje się nie mieć miejsca - po prostu przeskakuje z jednego stanu do drugiego.

Co ja robię źle?


49
2017-12-02 09:01


pochodzenie


Zauważ, że -ms- prefiks na transition jest niepotrzebne; Internet Explorer 10 obsługuje transition niesprawdzone, a Internet Explorer 9 nie obsługuje przejść.
Dzięki za informację. Nie wiedziałem, że IE10 obsługuje niepoprawione nazwisko. - Niet the Dark Absol


Odpowiedzi:


Działa po usunięciu pliku display nieruchomości.

#myelem {
    opacity: 0;
    transition: opacity 0.4s ease-in;
    -ms-transition: opacity 0.4s ease-in;
    -moz-transition: opacity 0.4s ease-in;
    -webkit-transition: opacity 0.4s ease-in;
}
#myelem.show {
    opacity: 1;
    transition: opacity 0.4s ease-out;
    -ms-transition: opacity 0.4s ease-out;
    -moz-transition: opacity 0.4s ease-out;
    -webkit-transition: opacity 0.4s ease-out;
}​

JSFiddle.

Powodem tego jest to, że tylko właściwości CSS z liczbami mogą być przenoszone. Co twoim zdaniem "stan 50%" powinien znajdować się pomiędzy "display: none;" i "display: block;"Ponieważ nie można obliczyć, nie można animować display własność.


45
2017-12-02 09:40



"tylko właściwości CSS z liczbami mogą być przeniesione" Niezupełnie ... - BoltClock♦
Słowo "liczba" jest dość niejasne, co sprawia, że ​​frazowanie wydaje się nieco dezorientujące. Powiedział, że jedną właściwością, która może być przeniesiona, która nie używa wartości numerycznych jest visibility, chociaż nie powoduje to oczywiście efektu animacji. - BoltClock♦
Pomyślałem, że za pomocą step-start i step-end byłoby w porządku, ponieważ nie ma żadnych wartości pośrednich. Wystarczająco fair. - Niet the Dark Absol
Wartość, która nie używa liczb, które można przenieść, to wartości koloru i gradientu. Dla wartości kolorów możesz użyć słów i tym podobnych. - Joseph Jaber
Nie rozumiem logiki stojącej za tym. Nawet nie definiuję display jako wartość transition własność. Mimo to działa tylko wtedy, gdy nie mam display właściwość w bloku css. Czemu? - nik


Nie możesz użyć display właściwość przechodzenia między stanami.


7
2017-12-02 09:26





Odpowiedź udzielona przez @MarcoK z komentarzami pokazuje już właściwy kierunek. Oprawa display własność przeszkadza  transition.
ZA lepsza praktyka jest jednak umieszczanie wersji niepotwierdzonej (standardowej) po wcześniejszych wersjach tych dostawców, aby zachować aktualność. Te ostatnie właściwości zastępują poprzednie.
Inne ulepszenia:

  • Jak zauważył @Charmander, -ms-transition nie jest obsługiwany przez żadnego Internet Explorera
  • Istnieje również operator Opery z prefiksem -o-transition dla Op 10,5-12 i Op Mobile 10-12, która obecnie jest prawdopodobnie obsługiwana przez mniej niż .1% globalnej przeglądarki. Włożę to do końca

CSS:

#myelem {
    opacity: 0;
    -webkit-transition: opacity .4s ease-in;
       -moz-transition: opacity .4s ease-in;
         -o-transition: opacity .4s ease-in;
            transition: opacity .4s ease-in;
}
#myelem.show {
    opacity: 1;
    -webkit-transition: opacity .4s ease-out;
       -moz-transition: opacity .4s ease-out;
         -o-transition: opacity .4s ease-out;
            transition: opacity .4s ease-out;
}​    

3
2017-07-25 11:20





Możliwe jest animowanie show i ukrywanie elementów w css, zamiast:

display: none;

/* and */

display: block;

posługiwać się:

overflow: hidden;
max-height: 0;

/* and */

max-height: 9999999px;

Ponieważ zastępujesz te właściwości, możesz animować dowolną wartość css transition.

przykład pracy: https://jsfiddle.net/utyja8qx/


1
2017-11-18 12:00