Tehát szeretné animálni a megjelenítési tulajdonságot

A CSS munkacsoport pár hete felfelé tartotta a hüvelykujját. A szuper-duper koncepcionális javaslat az, hogy animálhatunk vagy áttérhetünk mondjuk display: block nak nek display: none.

Kicsit agyforgató okoskodni a beállítás miatt display: none egy elemen törli az animációkat. És hozzáadásával újraindul az animáció. A specifikáció szerint:

A display tulajdonhoz none leállítja az elemre és leszármazottaira alkalmazott futó animációkat. Ha egy elem kijelzése nincs, a megjelenítés frissítése a következőtől eltérő értékre none elindítja az összes animációt, amelyet az elemre alkalmaz a animation-name tulajdonság, valamint az összes olyan animáció, amely a leszármazottaira vonatkozik display más, mint none.

Ez a körkörös viselkedés az, amitől a koncepció érkezéskor halottnak tűnik. De if @keyframes bármelyiket támogatta display érték más, mint none, akkor nincs mód rá none törölni vagy újraindítani a dolgokat. Ez nem adnone prioritást értékel, lehetővé téve none hogy csak az animáció vagy az átmenet befejezése után tegye meg a dolgát.

Miriámé dudál (ezt mi igazából így hívjuk, igaz?) elmagyarázza, hogyan működhet ez:

Nem pontosan interpolálunk, mondjuk block és a none, de megengedve block érintetlen marad mindaddig, amíg a dolgok le nem állnak, és biztonságosan alkalmazható none. Ezek kulcsszavak, így a kettő között nincsenek kifejezett értékek. Mint ilyen, ez egy különálló animáció marad. Az animáció befejezése után két érték között váltunk.

Ez a Robert Flackpéldája egyenesen innen származik a vita:

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

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

Ez egy hasznos példa, mert megmutatja, hogyan állítja be az első keret az elemet display: block, amely elsőbbséget élvez a mögöttes eszközzel szemben display: none mint nemnone érték. Ez lehetővé teszi az animáció futtatását és befejezését anélkül none folyamat közben törli vagy visszaállítja, mivel csak megoldódik után az animációt.

Ez a Miriam által hivatkozott példa a Mastodonon:

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

Ezúttal egy átmenettel van dolgunk. A mögöttes display értékre van állítva none mielőtt bármi történik, így teljesen kikerül a dokumentumfolyamból. Ha ezt lebegtetve állítanánk át, talán így:

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

…akkor az elemnek elméletileg el kell halványulnia 200ms. Ismét váltogatunk közöttük display értékeket, de block prioritást élvez, így az áttérés nem törlődik előre, és ténylegesen csak ezután kerül alkalmazásra opacity befejezi az átmenetet.

Legalábbis az én agyam így olvas bele. Örülök, hogy vannak szuper okos emberek, akik végiggondolják ezeket a dolgokat, mert úgy gondolom, hogy rengeteg dolgot kell megoldani. Például, hogy mi történik, ha egy elemhez több animációt rendelünk – a will none ezek közül bármelyiket visszaállíthatja vagy törölheti? Biztos vagyok benne, hogy a végtelen animációktól kezdve a fordított irányokig és minden egyéb dologgal idővel foglalkozni fognak.

De milyen szuper első lépés!