ஊடாடும் தன்மையை உருவாக்க CSS மாற்றங்கள் ஒரு சிறந்த வழியாகும். அது போதும், transition ஒரு தனிமத்தின் ஆரம்ப நிலைக்கு, மற்றும் உலாவி இரு நிலைகளுக்கு இடையேயான மாற்றத்தை அனிமேட் செய்கிறது. போன்ற உள்ளார்ந்த உறுப்பு அளவுகளுக்கான மாற்றங்கள் auto இருப்பினும், பல தசாப்தங்களாக வலை உருவாக்குநர்களுக்கு ஒரு பிரச்சனையாக உள்ளது, மேலும் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி உயரத்தை மாறும் வகையில் கணக்கிடுவதே ஒரே வழி.
ஒரு உறுப்பு அதன் முதல் பாணியைப் பெறும்போது மாற்றங்களைத் தொடங்குவது மற்றொரு சவால் - அது 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 இடைச்செருகல் வேண்டும். இயல்பாக, எண் மதிப்புகளுக்கு இடையில் மட்டுமே இடைக்கணிப்பு நிகழ்கிறது. உடன் 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 குரோம் மற்றும் எட்ஜில் உள்ளது, ஆனால் சஃபாரி மற்றும் பயர்பாக்ஸில் இல்லை. எதிர்காலத்தில் அது மாறும் என்று நம்புகிறேன்.