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
Այն calc-size()-Ֆունկցիան դեռ հասանելի չէ բոլոր բրաուզերներում: Հետադարձը կարելի է ձեռք բերել՝ պահպանելով բնօրինակը height: auto-Հռչակագրին կարելի է հասնել:
Հետ լուծում interpolate-size
Այն interpolate-sizeՀատկությունը թույլ է տալիս սահմանել բրաուզերների ինտերպոլացիոն վարքագիծը և որոշել՝ արդյոք տարբերակել հիմնաբառեր, ինչպիսիք են auto պետք է interpolate. Լռելյայնորեն, ինտերպոլացիան տեղի է ունենում միայն թվային արժեքների միջև: Հետ 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 միացված է. Այս կանոնները թույլ են տալիս անցումներ կատարել նույնիսկ սկզբնական ոճի թարմացման ժամանակ: Այն @starting-styleԿանոնը ապահովում է, որ անիմացիան ճիշտ է աշխատում սկզբնական ոճի թարմացման դեպքում:
Բրաուզերի աջակցություն
Ներկայումս նոր գույքեր calc-size() և interpolate-size դեռ չի աջակցվում բոլոր բրաուզերների կողմից: Chrome-ում դրանք հասանելի են փորձի դրոշի հետևում, բայց դեռ ոչ Safari-ում և Firefox-ում: Նմանապես, աջակցություն transition-behavior Ներկայացված է Chrome-ում և Edge-ում, բայց ոչ Safari-ում և Firefox-ում: Հուսանք, որ դա կփոխվի ապագայում: