ʻO ka hoʻololi CSS kahi ala maikaʻi loa e hana ai i ka pilina. Ua lawa, transition i ke kūlana mua o kahi mea, a hoʻolalelale ka polokalamu kele pūnaewele i ka hoʻololi ma waena o nā mokuʻāina ʻelua. Nā hoʻololi no ka nui o nā mea intrinsic like auto Eia nō naʻe, he pilikia ia no nā mea hoʻomohala pūnaewele no nā makahiki he nui, a ʻo ke koho wale nō ka helu ʻana i ke kiʻekiʻe me ka hoʻohana ʻana i ka JavaScript.
ʻO kekahi paʻakikī ʻē aʻe ke hoʻomaka nei i ka hoʻololi ʻana i ka wā e loaʻa ai kahi mea i kona ʻano mua - e like me ka wā i hoʻohui ʻia i ka DOM a i ʻole display-waiwai o none loli. Hōʻike kēia ʻatikala pehea e hoʻoponopono ai i kēia pilikia me nā hiʻohiʻona CSS hou e like me calc-size(), interpolate-size, @starting-style a transition-behavior hiki ke mālama ʻia.
Hoʻonā me calc-size()
Inā loaʻa i kekahi mea DOM e hele mai mai kahi kūlana pani (height: 0) i kahi mokuʻāina hāmama (height: auto), ʻaʻole i hoʻokō ʻia ka animation, ʻoiai ʻo ka transitionHoonohoia ka waiwai. No ka mea, ʻaʻole kākoʻo nā polokalamu kele i ka hoʻololi ʻana i nā nui intrinsic like auto kākoʻo. ʻO ka mea hou calc-size()ʻO ka hana, akā naʻe, hiki ke helu i kēia mau nui intrinsic a pēlā pū kekahi:
f95f6dcb193aa903adc84ce47bc4a296
ʻO ka calc-size()- ʻAʻole i loaʻa ka hana ma nā polokalamu kele pūnaewele āpau. Hiki ke loaʻa kahi hāʻule ma ka mālama ʻana i ka mea kumu height: auto- Hiki ke hoʻokō ʻia ka ʻōlelo.
Hoʻonā me interpolate-size
ʻO ka interpolate-sizeʻae ka waiwai iā ʻoe e hoʻonohonoho i ka ʻano interpolation o nā mea hoʻokele a hoʻoholo inā e hoʻokaʻawale i waena o nā huaʻōlelo e like me auto pono e interpolate. ʻO ka mea paʻamau, ʻike ʻia ka interpolation ma waena o nā waiwai helu. Me allow-keywords Eia naʻe, hiki iā ʻoe ke hoʻololi i nā hoʻololi ma waena o nā huaʻōlelo:
f95f6dcb193aa903adc84ce47bc4a296
Nau interpolate-size: allow-keywords ma ka :rootElement, ho'ā 'oe i ka hana hou no ka 'ao'ao holo'oko'a.
Hoʻololi mai display:none
ʻO kekahi pilikia e puka mai ana i ka wā o kahi mea o display:none nā hoʻololi i kahi kūlana ʻike ʻia. Ma laila display ʻaʻole ia he waiwai animatable, ʻaʻohe animation i loaʻa. Kōkua nā hana CSS hou maanei @starting-style a transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Me transition-behavior: allow-discrete hōʻoia i ka holo ʻana o ka animation ma mua o ka display-waiwai o block ma none ua hoololiia. Hāʻawi kēia mau lula i nā hoʻololi e hoʻokō ʻia i ka wā o ka hoʻohou ʻana i ke kaila mua. ʻO ka @starting-styleʻO ka lula e hōʻoia i ka holo pololei ʻana o ka animation ma kahi hōʻano hou.
Kākoʻo polokalamu kele pūnaewele
I kēia manawa nā waiwai hou calc-size() a interpolate-size ʻaʻole i kākoʻo ʻia e nā polokalamu kele a pau. Ma Chrome aia lākou ma hope o kahi hae hoʻokolohua, akā ʻaʻole i Safari a me Firefox. Pēlā nō, kākoʻo no transition-behavior Aia ma Chrome a me Edge, akā ʻaʻole ma Safari a me Firefox. Manaʻolana e hoʻololi ia i ka wā e hiki mai ana.