CSS-transiroj estas bonega maniero krei interagadon. Sufiĉas, transition al la komenca stato de elemento, kaj la retumilo animas la transiron inter la du statoj. Transiroj por internaj elementgrandecoj kiel auto Tamen, estis problemo por retaj programistoj dum jardekoj, kaj la sola eblo estis kalkuli la altecon dinamike uzante JavaScript.
Alia defio estas komenci transirojn kiam elemento ricevas sian unuan stilon - kiel kiam ĝi estas aldonita al la DOM aŭ kiam la display-valoro de none ŝanĝoj. Ĉi tiu artikolo klarigas kiel solvi ĉi tiun problemon kun la novaj funkcioj de CSS kiel calc-size(), interpolate-size, @starting-style kaj transition-behavior povas esti administrita.
Solvo kun calc-size()
Se oni havas DOM-elementon kiu venas de fermita stato (height: 0) al malferma stato (height: auto) transiras, la animacio kutime ne estas efektivigita, kvankam la transitionPosedaĵo estas fiksita. Ĉi tio estas ĉar retumiloj ne subtenas transirojn al internaj grandecoj kiel auto subteno. La nova calc-size()Funkcio tamen ebligas kalkulojn pri ĉi tiuj internaj kvantoj kaj tiel ankaŭ transirojn:
f95f6dcb193aa903adc84ce47bc4a296
La calc-size()-Funkcio ankoraŭ ne disponeblas en ĉiuj retumiloj. Rezervo povas esti atingita konservante la originalon height: auto-Deklaro povas esti atingita.
Solvo kun interpolate-size
La interpolate-sizePosedaĵo permesas al vi agordi la interpolan konduton de retumiloj kaj decidi ĉu distingi inter ŝlosilvortoj kiel ekzemple auto devus interpoli. Defaŭlte, interpolado okazas nur inter nombraj valoroj. Kun allow-keywords Tamen, vi povas ebligi transirojn inter ŝlosilvortoj:
f95f6dcb193aa903adc84ce47bc4a296
De vi interpolate-size: allow-keywords sur la :rootElemento, vi aktivigas la novan konduton por la tuta paĝo.
Transiro de display:none
Alia problemo ekestas kiam elemento de display:none transiroj al videbla stato. Tie display ne estas vigebla eco, neniu animacio okazas. La novaj CSS-funkcioj helpas ĉi tie @starting-style kaj transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Kun transition-behavior: allow-discrete certigas ke la animacio kuras antaŭ la display-valoro de block on none estas ŝaltita. Ĉi tiuj reguloj permesas transirojn esti efektivigitaj eĉ dum komenca stilĝisdatigo. La @starting-styleRegulo certigas, ke la animacio funkcias ĝuste en komenca stila ĝisdatigo.
Subteno de retumilo
Nuntempe la novaj propraĵoj calc-size() kaj interpolate-size ankoraŭ ne subtenata de ĉiuj retumiloj. En Chrome ili disponeblas malantaŭ eksperimenta flago, sed ankoraŭ ne en Safaro kaj Fajrovulpo. Same, subteno por transition-behavior ĉeestas en Chrome kaj Edge, sed ne en Safaro kaj Fajrovulpo. Espereble tio ŝanĝiĝos estonte.