CSS өтүүлөрү интерактивдүүлүктү түзүүнүн эң сонун жолу. Бул жетиштүү, transition элементтин баштапкы абалына, ал эми браузер эки абалдын ортосундагы өтүүнү жандандырат. сыяктуу ички элемент өлчөмдөрү үчүн өтүүлөр auto Бирок, ондогон жылдар бою веб-иштеп чыгуучулар үчүн көйгөй болуп келген жана жалгыз вариант JavaScript аркылуу бийиктикти динамикалык эсептөө болгон.
Дагы бир кыйынчылык - бул элемент биринчи стилин алганда, мисалы, ал DOMга кошулганда же display- мааниси none өзгөрүүлөр. Бул макалада жаңы CSS функциялары менен бул көйгөйдү кантип чечүү керектиги айтылат calc-size(), interpolate-size, @starting-style жана transition-behavior башкарууга болот.
Менен чечүү calc-size()
Эгер бирөө жабык абалдан келген DOM элементине ээ болсо (height: 0) ачык абалга (height: auto) өтүп кетсе да, анимация адатта аткарылбайт transitionКасиет коюлган. Себеби браузерлер сыяктуу ички өлчөмдөргө өтүүнү колдобойт auto колдоо. жаңысы calc-size()Функциясы болсо, бул ички чоңдуктар боюнча эсептөөлөрдү жүргүзүүгө жана ошону менен өткөөлгө да мүмкүндүк берет:
f95f6dcb193aa903adc84ce47bc4a296
The calc-size()-Функция азырынча бардык браузерлерде жеткиликтүү эмес. Түпнусканы сактоо менен артка кайтууга болот height: auto- Декларацияга жетишсе болот.
Менен чечүү interpolate-size
The interpolate-sizeМулк браузерлердин интерполяциялык жүрүм-турумун орнотууга жана сыяктуу ачкыч сөздөрдү айырмалоону чечүүгө мүмкүндүк берет auto интерполяциялоо керек. Демейки боюнча, интерполяция сандык маанилердин ортосунда гана болот. менен allow-keywords Бирок, сиз ачкыч сөздөрдүн ортосундагы өтүүнү иштете аласыз:
f95f6dcb193aa903adc84ce47bc4a296
Сен тарабынан interpolate-size: allow-keywords боюнча :rootЭлементти колдонсоңуз, сиз бүт бет үчүн жаңы жүрүм-турумду активдештиресиз.
Дан өтүү display:none
Элементи болгондо дагы бир көйгөй пайда болот display:none көрүнүүчү абалга өтөт. Ал жерде display анимациялануучу касиет эмес, анимация болбойт. Бул жерде жаңы CSS функциялары жардам берет @starting-style жана transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Менен transition-behavior: allow-discrete анимациянын алдында иштешин камсыздайт display- мааниси block күйүк none которулат. Бул эрежелер өтүүлөрдү стилди баштапкы жаңыртуу учурунда да аткарууга мүмкүндүк берет. The @starting-styleЭреже анимациянын баштапкы стилди жаңыртууда туура иштешин камсыздайт.
Браузерди колдоо
Учурда жаңы мүлктөр calc-size() жана interpolate-size азырынча бардык браузерлер тарабынан колдоого алынбайт. Chrome'до алар эксперименттик желектин артында жеткиликтүү, бирок Safari жана Firefoxто жок. Ошо сыяктуу эле, колдоо transition-behavior Chrome жана Edgeде бар, бирок Safari жана Firefoxто эмес. Бул келечекте өзгөрөт деп үмүттөнөбүз.