Więc chciałbyś animować właściwość display

Grupa Robocza CSS dał temu kciuk w górę kilka tygodni temu. Super-duper koncepcja koncepcyjna polega na tym, że możemy animować lub przejść od, powiedzmy, display: block do display: none.

To trochę łamigłówka, aby uzasadnić, ponieważ ustawienie display: none na elemencie anuluje animacje. A dodanie go ponownie uruchamia animacje. Zgodnie ze specyfikacją:

Ustawianie display własność do none zakończy każdą uruchomioną animację zastosowaną do elementu i jego potomków. Jeśli element nie ma żadnego wyświetlacza, aktualizowanie wyświetlacza do wartości innej niż none uruchomi wszystkie animacje zastosowane do elementu przez animation-name właściwość, a także wszystkie animacje zastosowane do potomków z display inne niż none.

To okrągłe zachowanie sprawia, że ​​koncepcja wydaje się martwa w momencie przybycia. Ale if @keyframes obsługiwane żadne display wartość inne niż none, to nie ma na to rady none aby anulować lub ponownie uruchomić rzeczy. To daje nie-none wartości priorytet, pozwalając none zrobić to dopiero po zakończeniu animacji lub przejścia.

Miriam trąbienie (tak naprawdę je nazywamy, prawda?) wyjaśnia, jak to może działać:

Nie do końca interpolujemy między, powiedzmy, block i none, ale pozwalając block pozostać nienaruszony do czasu, gdy rzeczy przestaną się poruszać i będzie można go bezpiecznie zastosować none. Są to słowa kluczowe, więc nie ma wyraźnych wartości między nimi. W związku z tym pozostaje to dyskretną animacją. Po zakończeniu animacji przełączamy się między dwiema wartościami.

To jest Roberta Flackaprzykład zaczerpnięty prosto z dyskusja:

@keyframes slideaway {
  from { display: block; }
  to { transform: translateY(40px); opacity: 0;}
}

.hide {
  animation: slideaway 200ms;
  display: none;
}

Jest to pomocny przykład, ponieważ pokazuje, jak pierwsza ramka ustawia element display: block, który ma pierwszeństwo przed instrumentem bazowym display: none jako nie-none wartość. Dzięki temu animacja może działać i kończyć się bez none anulowanie lub resetowanie go w trakcie, ponieważ tylko rozwiązuje po animacja.

Oto przykład, do którego odwołuje się Miriam na Mastodoncie:

.hide {
  transition: opacity 200ms, display 200ms;
  display: none;
  opacity: 0;
}

Tym razem mamy do czynienia z przejściem. Leżący poniżej display wartość jest ustawiona na none zanim cokolwiek się wydarzy, więc jest całkowicie poza obiegiem dokumentów. Teraz, gdybyśmy mieli przenieść to po najechaniu kursorem, może tak:

.hide:hover {
  display: block;
  opacity: 1;
}

…wtedy element powinien teoretycznie zanikać o godz 200ms. Znowu przełączamy się pomiędzy display wartości, ale block ma priorytet, więc przejście nie jest anulowane z góry i jest faktycznie stosowane później opacity kończy swoje przejście.

Przynajmniej tak odczytuje to mój umysł. Cieszę się, że są super mądrzy ludzie, którzy zastanawiają się nad tymi rzeczami, ponieważ wyobrażam sobie, że jest mnóstwo rzeczy do uporządkowania. Na przykład, co się stanie, jeśli do elementu zostanie przypisanych wiele animacji — will none zresetować lub anulować którekolwiek z nich? Jestem pewien, że wszystko, od nieskończonych animacji, odwróconych kierunków i wszelkiego rodzaju innych rzeczy, zostanie rozwiązane z czasem.

Ale co za super fajny pierwszy krok!