CSS ஐப் பயன்படுத்தி உயரத்தை 0 இலிருந்து தானாக மாற்றுதல்

CSS உடன் மென்மையான உயர மாற்றங்களை உருவாக்குதல்

CSS ஐப் பயன்படுத்தி ஒரு தனிமத்தின் உயரத்தை 0 இலிருந்து தானாக மாற்றுவது, தானியங்கு மதிப்புக்கு வரையறுக்கப்பட்ட இறுதிப்புள்ளி இல்லாததால் சவாலாக இருக்கலாம். இது அடிக்கடி உறுப்புகள் ஒரு மென்மையான மாற்றம் விளைவு இல்லாமல் திடீரென்று தோன்றும்.

இந்த கட்டுரையில், ஒரு மென்மையான ஸ்லைடு-டவுன் விளைவை எவ்வாறு அடைவது என்பதை ஆராய்வோம்

CSS மாற்றங்களைப் பயன்படுத்தும் உறுப்பு. பொதுவான சிக்கல்களை ஆராய்ந்து, JavaScript ஐ நம்பாமல் தடையற்ற மாற்றத்தை உருவாக்க தீர்வுகளை வழங்குவோம்.

கட்டளை	விளக்கம்
overflow: hidden;	உறுப்பு பெட்டிக்கு வெளியே நிரம்பி வழியும் எந்த உள்ளடக்கத்தையும் மறைக்கும். உயர மாற்றங்களின் போது உள்ளடக்கத் தெரிவுநிலையை நிர்வகிக்கப் பயன்படுகிறது.
transition: height 1s ease;	ஈஸி டைமிங் செயல்பாட்டைப் பயன்படுத்தி 1 வினாடிக்கு மேல் உயரப் பண்புக்கு மென்மையான மாற்றம் விளைவைப் பயன்படுத்துகிறது.
scrollHeight	காண முடியாத அதிகப்படியான உள்ளடக்கம் உட்பட ஒரு உறுப்பின் முழு உயரத்தையும் வழங்குகிறது. டைனமிக் உயரங்களைக் கணக்கிட JavaScript இல் பயன்படுத்தப்படுகிறது.
addEventListener('mouseenter')	மவுஸ் பாயிண்டர் உறுப்புக்குள் நுழையும் போது தூண்டும் நிகழ்வு ஹேண்ட்லரை 'mouseenter' நிகழ்வுடன் இணைக்கிறது. உயர மாற்றத்தைத் தொடங்கப் பயன்படுகிறது.
addEventListener('mouseleave')	'மவுஸ்லீவ்' நிகழ்வில் நிகழ்வு ஹேண்ட்லரை இணைக்கிறது, இது மவுஸ் பாயிண்டர் உறுப்பை விட்டு வெளியேறும்போது தூண்டுகிறது. உயர மாற்றத்தை மாற்றியமைக்கப் பயன்படுகிறது.
style.height	ஜாவாஸ்கிரிப்டில் ஒரு உறுப்பின் உயரத்தை நேரடியாக அமைக்கிறது. மென்மையான மாற்றங்களுக்கு உயரத்தை மாறும் வகையில் சரிசெய்யப் பயன்படுகிறது.
:root	ஆவணத்தின் மூல உறுப்புடன் பொருந்தக்கூடிய CSS போலி-வகுப்பு. உலகளாவிய CSS மாறிகளை வரையறுக்கப் பயன்படுகிறது.
var(--max-height)	CSS மாறியைக் குறிப்பிடுகிறது. மாற்றங்களின் போது அதிகபட்ச உயரத்தை மாறும் வகையில் ஒதுக்கப் பயன்படுகிறது.

CSS இல் மென்மையான உயர மாற்றங்களைப் புரிந்துகொள்வது

முதல் ஸ்கிரிப்ட் ஒரு தனிமத்தின் உயரத்தை 0 இலிருந்து ஒரு குறிப்பிட்ட உயரத்திற்கு மாற்றுவதற்கான CSS-மட்டும் அணுகுமுறையை நிரூபிக்கிறது. பயன்படுத்துவதன் மூலம் சொத்து, உறுப்பின் உயரத்திற்கு அப்பால் நீட்டிக்கப்படும் எந்த உள்ளடக்கமும் மறைக்கப்பட்டு, சுத்தமான மாற்றத்தை உறுதி செய்கிறது. தி சொத்து 1 வினாடிக்கு மேல் உயரத்திற்கு ஒரு மென்மையான மாற்றம் விளைவைப் பயன்படுத்துகிறது. மூல உறுப்பு மேல் வட்டமிடப்படும் போது, ​​குழந்தையின் உறுப்பின் உயரம் முன்னரே தீர்மானிக்கப்பட்ட மதிப்புக்கு மாறி, கீழே சறுக்கும் மாயையை உருவாக்குகிறது. இருப்பினும், இந்த முறையானது, உறுப்புகளின் இறுதி உயரத்தை முன்கூட்டியே தெரிந்து கொள்ள வேண்டும்.

இரண்டாவது ஸ்கிரிப்ட் ஒரு உறுப்பின் உயரத்தை மாறும் வகையில் சரிசெய்ய ஜாவாஸ்கிரிப்டை இணைக்கிறது. மூல உறுப்பு மேல் வட்டமிட்டால், ஸ்கிரிப்ட் பயன்படுத்தும் உள்ளடக்கத்தின் முழு உயரத்தையும் கணக்கிடுகிறது மற்றும் இந்த மதிப்பை அமைக்கிறது குழந்தை உறுப்பு சொத்து. இறுதி உயரத்தை முன்கூட்டியே அறியாமல், உயரம் 0 இலிருந்து முழு உள்ளடக்க உயரத்திற்கு மென்மையான மாற்றத்தை இது உறுதி செய்கிறது. தி மற்றும் addEventListener('mouseleave') மவுஸ் ஹோவர் நிகழ்வுகளைக் கையாள செயல்பாடுகள் பயன்படுத்தப்படுகின்றன, மவுஸ் தாய் உறுப்பை விட்டு வெளியேறும்போது உயரம் 0 க்கு திரும்புவதை உறுதி செய்கிறது.

CSS உயர மாற்றங்களுக்கான மேம்பட்ட நுட்பங்கள்

மூன்றாவது ஸ்கிரிப்ட் CSS மாறிகளை உயர மாற்றங்களை நிர்வகிக்க உதவுகிறது. உலகளாவிய மாறியை வரையறுப்பதன் மூலம் அதிகபட்ச உயரத்திற்கு, மிதவை நிலையின் போது குழந்தை உறுப்புக்கு இந்த மதிப்பை மாறும் வகையில் ஒதுக்கலாம். மாறி உயரத்தை அமைக்க CSS க்குள் பயன்படுத்தப்படுகிறது, மாற்றம் சீராக இருப்பதையும் உள்ளடக்கத்தில் ஏற்படும் மாற்றங்களுக்கு ஏற்றதாக இருப்பதையும் உறுதி செய்கிறது. இந்த அணுகுமுறை CSS இன் எளிமையை டைனமிக் மதிப்புகளின் நெகிழ்வுத்தன்மையுடன் ஒருங்கிணைக்கிறது, தேவைக்கேற்ப மாற்றத்தின் உயரங்களை நிர்வகிப்பதையும் புதுப்பிப்பதையும் எளிதாக்குகிறது.

இந்த முறைகள் ஒவ்வொன்றும் ஒரு தனிமத்தின் உயரத்தை 0 இலிருந்து தானாக மாற்றுவதில் உள்ள சிக்கலுக்கு வெவ்வேறு தீர்வை வழங்குகிறது. தூய CSS அணுகுமுறை நேரடியானது ஆனால் முன் வரையறுக்கப்பட்ட உயரத்தின் தேவையால் வரையறுக்கப்பட்டுள்ளது. ஜாவாஸ்கிரிப்ட் முறை அதிக நெகிழ்வுத்தன்மையை வழங்குகிறது, டைனமிக் உயர கணக்கீடுகளை அனுமதிக்கிறது, ஆனால் கூடுதல் ஸ்கிரிப்டிங் தேவைப்படுகிறது. CSS மாறிகள் நுட்பம் ஒரு நடுத்தர நிலத்தை வழங்குகிறது, இது டைனமிக் திறன்களுடன் பயன்பாட்டின் எளிமையை இணைக்கிறது. இந்த நுட்பங்களைப் புரிந்துகொண்டு பயன்படுத்துவதன் மூலம், டெவலப்பர்கள் தங்கள் வலைத் திட்டங்களில் மென்மையான, பார்வைக்கு ஈர்க்கும் உயர மாற்றங்களை உருவாக்க முடியும்.

<style>
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
  #parent:hover #child {
    height: 100px; /* Set this to the max height you expect */
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>

<style>
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>
<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');
  parent.addEventListener('mouseenter', () => {
    child.style.height = child.scrollHeight + 'px';
  });
  parent.addEventListener('mouseleave', () => {
    child.style.height = '0';
  });
</script>

<style>
  :root {
    --max-height: 100px;
  }
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
  #parent:hover #child {
    height: var(--max-height);
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>

மென்மையான மாற்றங்களுக்கான CSS அனிமேஷன்களை ஆய்வு செய்தல்

உயரத்தை மாற்றுவதற்கு கூடுதலாக, CSS அனிமேஷன்கள் மென்மையான காட்சி விளைவுகளை உருவாக்க பல்துறை வழியை வழங்குகிறது. CSS அனிமேஷன்கள், ஒளிபுகாநிலை, உருமாற்றம் மற்றும் வண்ணம் உட்பட உயரத்திற்கு அப்பால் பரந்த அளவிலான பண்புகளை உயிரூட்டுவதற்கு உங்களை அனுமதிக்கின்றன. கீஃப்ரேம்களை வரையறுப்பதன் மூலம், அனிமேஷனின் இடைநிலை படிகளை நீங்கள் கட்டுப்படுத்தலாம், இதன் விளைவாக மிகவும் சிக்கலான மற்றும் பார்வைக்கு ஈர்க்கும் மாற்றங்கள் ஏற்படும். எடுத்துக்காட்டாக, அதிக ஆற்றல்மிக்க மற்றும் ஈர்க்கக்கூடிய பயனர் அனுபவத்தை உருவாக்க, உயர மாற்றத்தை ஃபேட்-இன் விளைவுடன் இணைக்கலாம். CSS இல் உள்ள கீஃப்ரேம்கள் விதியானது, அனிமேஷனின் தொடக்க மற்றும் முடிவு நிலைகளையும், எந்த இடைநிலை நிலைகளையும் குறிப்பிட உங்களை அனுமதிக்கிறது, இது அனிமேஷன் செயல்முறையின் மீது உங்களுக்கு சிறந்த கட்டுப்பாட்டை வழங்குகிறது.

CSS அனிமேஷன்களின் மற்றொரு அம்சம் அனிமேஷன்-தாமதப் பண்புகளைப் பயன்படுத்தி பல அனிமேஷன்களை வரிசைப்படுத்தும் திறன் ஆகும். வெவ்வேறு அனிமேஷன்களின் தொடக்க நேரங்களைத் தடுமாறச் செய்து, அடுக்கு விளைவை உருவாக்க இந்தப் பண்பு உங்களை அனுமதிக்கிறது. உதாரணமாக, நீங்கள் முதலில் ஒரு உறுப்பின் உயரத்தை மாற்றலாம், அதைத் தொடர்ந்து வண்ண மாற்றம், பின்னர் உருமாற்றம் சுழற்சி. இந்த அனிமேஷன்களை கவனமாக ஒழுங்கமைப்பதன் மூலம், நீங்கள் அதிநவீன மற்றும் மெருகூட்டப்பட்ட பயனர் இடைமுகங்களை உருவாக்கலாம். கூடுதலாக, CSS அனிமேஷன்கள் CSS மாற்றங்களுடன் இணைந்து தனித்த மற்றும் தொடர்ச்சியான நிலை மாற்றங்களைக் கையாளலாம், ஊடாடும் இணைய அனுபவங்களை உருவாக்குவதற்கான விரிவான கருவித்தொகுப்பை வழங்குகிறது.

1. CSS ஐப் பயன்படுத்தி உயரத்தை 0 இலிருந்து தானாக மாற்றுவது எப்படி?
2. இதை அடைய, நீங்கள் நிலையான உயரம் மற்றும் கலவையைப் பயன்படுத்தலாம் உயர மதிப்பை மாறும் வகையில் அமைக்க. தூய CSS தீர்வுகள் வரம்புக்குட்பட்டவை நேரடியாக உயிரூட்டக்கூடியது அல்ல.
3. CSS இல் மாற்றங்கள் மற்றும் அனிமேஷன்களுக்கு என்ன வித்தியாசம்?
4. CSS மாற்றங்கள் சொத்து மதிப்புகளை ஒரு மாநிலத்திலிருந்து மற்றொரு மாநிலத்திற்கு சுமூகமாக (ஒரு குறிப்பிட்ட காலப்பகுதியில்) மாற்றுவதற்கான வழியை வழங்குகிறது, பொதுவாக மிதவை போன்ற நிலை மாற்றத்தில். CSS அனிமேஷன்கள் மாநிலங்கள் மற்றும் நேரத்தை வரையறுக்க கீஃப்ரேம்களைப் பயன்படுத்தி மிகவும் சிக்கலான காட்சிகளை அனுமதிக்கின்றன.
5. டைனமிக் உயரம் கொண்ட உறுப்புகளுக்கு CSS மாற்றங்களைப் பயன்படுத்தலாமா?
6. ஆம், ஆனால் நீங்கள் பொதுவாக உயரத்தை முன்கூட்டியே கணக்கிட வேண்டும் அல்லது சுமூகமான மாற்றத்திற்கான உயர மதிப்பை மாறும் வகையில் அமைக்க JavaScript ஐப் பயன்படுத்த வேண்டும்.
7. இதன் நோக்கம் என்ன CSS மாற்றங்களில் உள்ள சொத்து?
8. தி உறுப்பின் எல்லைகளை மீறும் எந்தவொரு உள்ளடக்கத்தையும் மறைக்க சொத்து பயன்படுத்தப்படுகிறது, இது உயர மாற்றங்களை உள்ளடக்கிய சுத்தமான மாற்றங்களுக்கு அவசியம்.
9. எப்படி செய்வது CSS அனிமேஷன்களில் வேலை செய்கிறீர்களா?
10. CSS அனிமேஷன்களில், அனிமேஷனின் போது பல்வேறு புள்ளிகளில் ஒரு தனிமத்தின் நிலைகளை வரையறுக்க உங்களை அனுமதிக்கிறது. சிக்கலான அனிமேஷன்களை உருவாக்கி, ஒவ்வொரு கீஃப்ரேமிலும் பண்புகள் மற்றும் அவற்றின் மதிப்புகளை நீங்கள் குறிப்பிடலாம்.
11. CSS மாற்றங்கள் மற்றும் அனிமேஷன்களை இணைக்க முடியுமா?
12. ஆம், CSS மாற்றங்கள் மற்றும் அனிமேஷன்களை இணைப்பது, நிலை மாற்றங்கள் மற்றும் தொடர்ச்சியான அனிமேஷன்கள் இரண்டையும் கையாள்வதன் மூலம் சிறந்த பயனர் அனுபவத்தை வழங்க முடியும்.
13. என்ன ஜாவாஸ்கிரிப்டில்?
14. நிரம்பி வழிவதால் திரையில் காண முடியாத உள்ளடக்கம் உட்பட ஒரு உறுப்பின் மொத்த உயரத்தை வழங்குகிறது. மென்மையான மாற்றங்களுக்கான டைனமிக் உயரங்களைக் கணக்கிடுவதற்கு இது பயனுள்ளதாக இருக்கும்.
15. எப்படி செய்கிறது வேலை?
16. தி அனிமேஷன் எப்போது தொடங்க வேண்டும் என்பதை சொத்து குறிப்பிடுகிறது. அடுக்கு விளைவுக்காக பல அனிமேஷன்களை வரிசைப்படுத்த இது உங்களை அனுமதிக்கிறது.
17. ஏன் CSS இல் பயன்படுத்தப்பட்டதா?
18. தி போலி-வகுப்பு ஆவணத்தின் மூல உறுப்பைக் குறிவைக்கிறது. ஸ்டைல்ஷீட் முழுவதும் மீண்டும் பயன்படுத்தக்கூடிய உலகளாவிய CSS மாறிகளை வரையறுக்க இது பொதுவாகப் பயன்படுத்தப்படுகிறது.

CSS இல் உயரம் 0 இலிருந்து ஆட்டோ வரை மென்மையான மாற்றங்களை அடைவதற்கு நுட்பங்களின் கலவை தேவைப்படுகிறது. தூய CSS எளிமையை வழங்கும் அதே வேளையில், அது முன் வரையறுக்கப்பட்ட உயரங்களின் தேவையால் வரையறுக்கப்பட்டுள்ளது. ஜாவாஸ்கிரிப்டை ஒருங்கிணைப்பதன் மூலம், நீங்கள் மாறும் வகையில் கணக்கிட்டு உயரங்களை அமைக்கலாம், இது தடையற்ற மாற்றத்தை வழங்குகிறது. CSS மாறிகளைப் பயன்படுத்துவது மாறும் மதிப்புகளை நிர்வகிக்க ஒரு நெகிழ்வான அணுகுமுறையை வழங்குகிறது. இந்த முறைகளை இணைப்பது, பொதுவாக உயர மாற்றங்களுடன் தொடர்புடைய திடீர் மாற்றங்கள் இல்லாமல் அதிக ஊடாடும் மற்றும் ஈர்க்கக்கூடிய இணைய அனுபவங்களை உருவாக்க டெவலப்பர்களை அனுமதிக்கிறது.