Transitus CSS magnus modus ad interactivity creandi sunt. satis est, transition ad primam elementi statum et navigatorem transitus inter utramque civitatem. Transitus ad elementum intrinsecum magnitudinum sicut auto Tamen quaestio de interretialibus per decenniis tincidunt fuit, et sola optio fuit ut dynamice ratio altitudinis usura JavaScript.
Alia provocatio est transitus incipiens cum elementum primum stilum accipit - sicut cum additur domno vel cum " display-value of * none mutationibus. Hic articulus explicat quomodo problema hoc solvendum cum notis novis CSS similibus calc-size(), interpolate-size, @starting-style et transition-behavior tractari potest.
Solution cum calc-size()
Si quis habet dom elementum quod ex statu clauso venit (height: 0) Ad statum apertum (height: auto) praeterit, animatio fieri non solet, etiamsi transitionProprietas est posita. Hoc est quod navigatores non sustinent transitiones ad magnitudinum intrinsecarum similia auto suscipio. Novus unus calc-size()Munus autem dat calculi in quantitatibus intrinsecis et sic etiam transitionibus:
f95f6dcb193aa903adc84ce47bc4a296
The calc-size()-Munus nondum in omnibus navigatoribus praesto est. Fallback potest fieri observatio originali height: auto-Declaratio perfici potest.
Solution cum interpolate-size
The interpolate-sizeRes permittit ut interpolationem mores navigantium constituas ac discernas an inter keywords ut " auto interponere debet. Defalta, interpolatio tantum inter valores numericos occurrit. cum allow-keywords Sed transire potes inter keywords:
f95f6dcb193aa903adc84ce47bc4a296
Per te interpolate-size: allow-keywords in " :rootElementum, mores novos excitas ad totam paginam.
Transitus a display:none
Alia quaestio oritur quando elementum display:none transitus ad statum visibilis. Ibi display non animabilis, non animatio. Novae CSS munera hic adiuvant @starting-style et transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Cum transition-behavior: allow-discrete fit ut animationem ante display-value of * block on none est switched. Hae regulae permittunt transitiones exsecutioni mandandae etiam in initio styli renovationis. The @starting-styleRegula efficit ut animatio in renovatione styli initialis recte decurrat.
Pasco firmamentum
Currently novae possessiones calc-size() et interpolate-size nondum omnibus navigatoribus suffulta. In Chrome praesto sunt post vexillum experimentum, sed nondum in Safari et Firefox. Item, auxilium transition-behavior Chrome et Edge, sed non in Safari et Firefox. In votis est ut in posterum mutabitur.