CSS வியூ ட்ரான்சிஷன்களில் தேர்ச்சி பெறுதல்: சூடோ-எலிமென்ட் ஸ்டைலிங்கில் ஒரு ஆழமான பார்வை

தொடர்ந்து மாறிவரும் இணைய மேம்பாட்டின் உலகில், தடையற்ற, சீரான, மற்றும் ஈர்க்கக்கூடிய பயனர் அனுபவத்தை நோக்கிய தேடல் ஒரு தொடர்ச்சியான முயற்சியாகும். பல ஆண்டுகளாக, டெவலப்பர்கள் வலை மற்றும் நேட்டிவ் செயலிகளுக்கு இடையிலான இடைவெளியைக் குறைக்க முயன்று வருகின்றனர், குறிப்பாக பக்க மாற்றங்களின் மென்மையைப் பொறுத்தவரை. பாரம்பரிய வலை வழிசெலுத்தல் பெரும்பாலும் ஒரு கடுமையான, முழு-பக்க மறுஏற்றத்தில் விளைகிறது—ஒரு வெற்று வெள்ளைத் திரை பயனரின் ஈடுபாட்டை தற்காலிகமாக உடைக்கிறது. ஒற்றைப் பக்கச் செயலிகள் (SPAs) இதைக் குறைத்துள்ளன, ஆனால் தனிப்பயன், அர்த்தமுள்ள மாற்றங்களை உருவாக்குவது ஒரு சிக்கலான மற்றும் பெரும்பாலும் பலவீனமான பணியாகவே உள்ளது, இது ஜாவாஸ்கிரிப்ட் லைப்ரரிகள் மற்றும் சிக்கலான நிலை நிர்வாகத்தை பெரிதும் சார்ந்துள்ளது.

இங்கேதான் CSS வியூ ட்ரான்சிஷன்ஸ் API வருகிறது, இது இணையத்தில் UI மாற்றங்களை நாம் கையாளும் முறையை புரட்சிகரமாக்கவிருக்கும் ஒரு கேம்-சேஞ்சிங் தொழில்நுட்பமாகும். இந்த சக்திவாய்ந்த API, வெவ்வேறு DOM நிலைகளுக்கு இடையில் அனிமேஷன் செய்வதற்கு ஒரு எளிய மற்றும் நம்பமுடியாத நெகிழ்வான பொறிமுறையை வழங்குகிறது, இது பயனர்கள் எதிர்பார்க்கும் பளபளப்பான, செயலி போன்ற அனுபவங்களை உருவாக்குவதை முன்னெப்போதையும் விட எளிதாக்குகிறது. இந்த API-யின் சக்தியின் மையத்தில் ஒரு புதிய CSS சூடோ-எலிமென்ட்கள் உள்ளன. இவை உங்கள் வழக்கமான செலக்டர்கள் அல்ல; இவை உலாவியால் உருவாக்கப்படும் டைனமிக், தற்காலிக எலிமென்ட்கள் ஆகும், இது ஒரு மாற்றத்தின் ஒவ்வொரு கட்டத்திலும் உங்களுக்கு நுணுக்கமான கட்டுப்பாட்டை வழங்குகிறது. இந்த வழிகாட்டி, இந்த சூடோ-எலிமென்ட் மரத்தில் உங்களை ஆழமாக அழைத்துச் செல்லும், ஒவ்வொரு கூறுகளையும் எப்படி ஸ்டைல் செய்வது என்பதை ஆராய்ந்து, உலகளாவிய பார்வையாளர்களுக்காக பிரமிக்க வைக்கும், செயல்திறன் மிக்க மற்றும் அணுகக்கூடிய அனிமேஷன்களை உருவாக்குகிறது.

ஒரு வியூ ட்ரான்சிஷனின் உடற்கூறியல்

ஒரு மாற்றத்தை ஸ்டைல் செய்வதற்கு முன்பு, ஒன்று தூண்டப்படும்போது திரைக்குப் பின்னால் என்ன நடக்கிறது என்பதை நாம் புரிந்து கொள்ள வேண்டும். நீங்கள் ஒரு வியூ ட்ரான்சிஷனைத் தொடங்கும்போது (உதாரணமாக, document.startViewTransition() ஐ அழைப்பதன் மூலம்), உலாவி தொடர்ச்சியான படிகளைச் செய்கிறது:

• பழைய நிலையைப் படம்பிடித்தல்: உலாவி தற்போதைய பக்கத்தின் நிலையின் ஒரு "ஸ்கிரீன்ஷாட்டை" எடுக்கிறது.
• DOM-ஐப் புதுப்பித்தல்: உங்கள் குறியீடு பின்னர் DOM-ல் அதன் மாற்றங்களைச் செய்கிறது (எ.கா., ஒரு புதிய வியூவிற்குச் செல்வது, எலிமென்ட்களைச் சேர்ப்பது அல்லது அகற்றுவது).
• புதிய நிலையைப் படம்பிடித்தல்: DOM புதுப்பிப்பு முடிந்ததும், உலாவி புதிய நிலையின் ஒரு ஸ்கிரீன்ஷாட்டை எடுக்கிறது.
• சூடோ-எலிமென்ட் மரத்தை உருவாக்குதல்: உலாவி பின்னர் பக்கத்தின் மேலடுக்கில் ஒரு தற்காலிக சூடோ-எலிமென்ட் மரத்தை உருவாக்குகிறது. இந்த மரத்தில் பழைய மற்றும் புதிய நிலைகளின் படம்பிடிக்கப்பட்ட படங்கள் உள்ளன.
• அனிமேட் செய்தல்: CSS அனிமேஷன்கள் இந்த சூடோ-எலிமென்ட்களுக்குப் பயன்படுத்தப்படுகின்றன, இது பழைய நிலையிலிருந்து புதிய நிலைக்கு ஒரு மென்மையான மாற்றத்தை உருவாக்குகிறது. இயல்புநிலையாக இது ஒரு எளிய கிராஸ்-ஃபேட் ஆகும்.
• சுத்தம் செய்தல்: அனிமேஷன்கள் முடிந்ததும், சூடோ-எலிமென்ட் மரம் அகற்றப்பட்டு, பயனர் புதிய, நேரடி DOM உடன் தொடர்பு கொள்ளலாம்.

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

• ::view-transition
  • ::view-transition-group(*)
    • ::view-transition-image-pair(*)
      • ::view-transition-old(*)
      • ::view-transition-new(*)

இந்த சூடோ-எலிமென்ட்கள் ஒவ்வொன்றும் எதைக் குறிக்கின்றன என்பதைப் பார்ப்போம்.

சூடோ-எலிமென்ட் பாத்திரங்கள்

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

::view-transition-group(*): ஒவ்வொரு தனித்துவமான மாற்றும் எலிமென்ட்டிற்கும் (view-transition-name CSS பண்பு மூலம் அடையாளம் காணப்படுகிறது), ஒரு குழு உருவாக்கப்படுகிறது. இந்த சூடோ-எலிமென்ட் அதன் உள்ளடக்கத்தின் நிலை மற்றும் அளவை அனிமேட் செய்வதற்குப் பொறுப்பாகும். உங்களிடம் ஒரு கார்டு திரையின் ஒரு பக்கத்திலிருந்து மறுபக்கத்திற்கு நகர்ந்தால், உண்மையில் நகர்வது ::view-transition-group தான்.

::view-transition-image-pair(*): குழுவின் உள்ளே அமைந்துள்ள இந்த எலிமென்ட், பழைய மற்றும் புதிய வியூக்களுக்கு ஒரு கொள்கலனாகவும் கிளிப்பிங் மாஸ்காகவும் செயல்படுகிறது. அதன் முதன்மைப் பங்கு, அனிமேஷனின் போது border-radius அல்லது transform போன்ற விளைவுகளைப் பராமரிப்பதும், இயல்புநிலை கிராஸ்-ஃபேட் அனிமேஷனைக் கையாள்வதும் ஆகும்.

::view-transition-old(*): இது பழைய நிலையில் (DOM மாற்றத்திற்கு முன்பு) உள்ள எலிமென்ட்டின் "ஸ்கிரீன்ஷாட்" அல்லது ரெண்டர் செய்யப்பட்ட வியூவைக் குறிக்கிறது. இயல்புநிலையாக, இது opacity: 1 இலிருந்து opacity: 0 க்கு அனிமேட் ஆகிறது.

::view-transition-new(*): இது புதிய நிலையில் (DOM மாற்றத்திற்குப் பிறகு) உள்ள எலிமென்ட்டின் "ஸ்கிரீன்ஷாட்" அல்லது ரெண்டர் செய்யப்பட்ட வியூவைக் குறிக்கிறது. இயல்புநிலையாக, இது opacity: 0 இலிருந்து opacity: 1 க்கு அனிமேட் ஆகிறது.

ரூட்: ::view-transition சூடோ-எலிமென்டை ஸ்டைல் செய்தல்

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

உதாரணமாக, இயல்புநிலை மாற்றம் 250 மில்லி விநாடிகள் நீடிக்கும் ஒரு கிராஸ்-ஃபேட் ஆகும். உங்கள் தளத்தில் உள்ள ஒவ்வொரு மாற்றத்திற்கும் இதை மாற்ற விரும்பினால், நீங்கள் ரூட் சூடோ-எலிமென்ட்டைக் குறிவைக்கலாம்:

::view-transition {

  animation-duration: 500ms;

  animation-timing-function: ease-in-out;

}

இந்த எளிய விதி இப்போது அனைத்து இயல்புநிலை பக்க மங்கல்களையும் இரு மடங்கு நேரம் எடுக்க வைக்கிறது மற்றும் 'ease-in-out' வளைவைப் பயன்படுத்துகிறது, இது அவற்றுக்கு சற்று வித்தியாசமான உணர்வைக் கொடுக்கிறது. நீங்கள் இங்கே சிக்கலான அனிமேஷன்களைப் பயன்படுத்தலாம் என்றாலும், பொதுவாக இது உலகளாவிய டைமிங் மற்றும் ஈஸிங்கை வரையறுக்கப் பயன்படுகிறது, மேலும் விரிவான நடன அமைப்பை மேலும் குறிப்பிட்ட சூடோ-எலிமென்ட்கள் கையாள அனுமதிக்கிறது.

குழுவாக்கம் மற்றும் பெயரிடுதல்: `view-transition-name`-இன் சக்தி

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

வெவ்வேறு DOM நிலைகளில் உள்ள இரண்டு எலிமென்ட்கள் கருத்தியல் ரீதியாக ஒரே மாதிரியானவை என்று உலாவிக்குச் சொல்ல, நீங்கள் view-transition-name CSS பண்பைப் பயன்படுத்துகிறீர்கள். இந்த பண்பு தொடக்க எலிமென்ட் மற்றும் முடிவு எலிமென்ட் ஆகிய இரண்டிற்கும் பயன்படுத்தப்பட வேண்டும்.

/* பட்டியல் பக்க CSS-ல் */

.product-thumbnail {

  view-transition-name: product-image;

}

/* விவரப் பக்க CSS-ல் */

.main-product-image {

  view-transition-name: product-image;

}

இரண்டு எலிமென்ட்களுக்கும் ஒரே தனித்துவமான பெயரைக் கொடுப்பதன் மூலம் ('product-image' இந்த விஷயத்தில்), நீங்கள் உலாவிக்கு அறிவுறுத்துகிறீர்கள்: "பழைய பக்கத்தை வெளியே மங்கச் செய்து புதிய பக்கத்தை உள்ளே மங்கச் செய்வதற்குப் பதிலாக, இந்த குறிப்பிட்ட எலிமென்ட்டிற்கு ஒரு சிறப்பு மாற்றத்தை உருவாக்குங்கள்." உலாவி இப்போது அதன் அனிமேஷனை ரூட் ஃபேடில் இருந்து தனித்தனியாகக் கையாள ஒரு பிரத்யேக ::view-transition-group(product-image)-ஐ உருவாக்கும். இதுவே பிரபலமான "மார்ஃபிங்" அல்லது "பகிரப்பட்ட எலிமென்ட்" மாற்ற விளைவை செயல்படுத்தும் அடிப்படைக் கருத்து.

முக்கிய குறிப்பு: ஒரு மாற்றத்தின் போது எந்தவொரு குறிப்பிட்ட கணத்திலும், ஒரு view-transition-name தனித்துவமாக இருக்க வேண்டும். ஒரே நேரத்தில் ஒரே பெயருடன் இரண்டு புலப்படும் எலிமென்ட்கள் இருக்க முடியாது.

ஆழமான ஸ்டைலிங்: முக்கிய சூடோ-எலிமென்ட்கள்

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

`::view-transition-group(name)`: நகர்த்துபவர்

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

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

::view-transition-group(product-image) {

  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}

இந்த எடுத்துக்காட்டில், நாம் தயாரிப்புப் படத்தின் இயக்கத்திற்கு மட்டும் ஒரு குறிப்பிட்ட ஈஸிங் ஃபங்ஷனைப் பயன்படுத்துகிறோம், இது பக்கத்தின் மற்ற பகுதிகளின் இயல்புநிலை மங்கலைப் பாதிக்காமல், அதை மேலும் டைனமிக் மற்றும் பௌதீகமாக உணர வைக்கிறது.

`::view-transition-image-pair(name)`: கிளிப்பர் மற்றும் ஃபேடர்

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

காட்சி நிலைத்தன்மையை உறுதிப்படுத்த அல்லது மேலும் மேம்பட்ட விளைவுகளை உருவாக்க நீங்கள் இந்த எலிமென்டை ஸ்டைல் செய்ய விரும்பலாம். கருத்தில் கொள்ள வேண்டிய ஒரு முக்கிய பண்பு isolation: isolate. குழந்தைகள் (பழைய மற்றும் புதிய) மீது மேம்பட்ட mix-blend-mode விளைவுகளைப் பயன்படுத்த நீங்கள் திட்டமிட்டால் இது முக்கியமானது, ஏனெனில் இது ஒரு புதிய ஸ்டாக்கிங் சூழலை உருவாக்குகிறது மற்றும் பிளெண்டிங் மாற்றக் குழுவிற்கு வெளியே உள்ள எலிமென்ட்களைப் பாதிப்பதைத் தடுக்கிறது.

::view-transition-image-pair(product-image) {

  isolation: isolate;

}

`::view-transition-old(name)` மற்றும் `::view-transition-new(name)`: நிகழ்ச்சியின் நட்சத்திரங்கள்

DOM மாற்றத்திற்கு முன்னும் பின்னும் உங்கள் எலிமென்ட்டின் காட்சித் தோற்றத்தைக் குறிக்கும் சூடோ-எலிமென்ட்கள் இவை. இங்கேதான் உங்கள் தனிப்பயன் அனிமேஷன் வேலைகளில் பெரும்பாலானவை நடக்கும். இயல்புநிலையாக, உலாவி opacity மற்றும் mix-blend-mode-ஐப் பயன்படுத்தி ஒரு எளிய கிராஸ்-ஃபேட் அனிமேஷனை இயக்குகிறது. ஒரு தனிப்பயன் அனிமேஷனை உருவாக்க, நீங்கள் முதலில் இயல்புநிலை ஒன்றை அணைக்க வேண்டும்.

::view-transition-old(name),

::view-transition-new(name) {

  animation: none;

}

இயல்புநிலை அனிமேஷன் முடக்கப்பட்டதும், நீங்கள் உங்கள் சொந்த அனிமேஷனைப் பயன்படுத்த சுதந்திரமாக இருக்கிறீர்கள். சில பொதுவான பேட்டர்ன்களை ஆராய்வோம்.

தனிப்பயன் அனிமேஷன்: ஸ்லைடு

ஒரு கிராஸ்-ஃபேடிற்குப் பதிலாக, ஒரு கொள்கலனின் உள்ளடக்கத்தை உள்ளே ஸ்லைடு செய்ய வைப்போம். உதாரணமாக, கட்டுரைகளுக்கு இடையில் செல்லும்போது, புதிய கட்டுரையின் உரை வலதுபுறத்தில் இருந்து ஸ்லைடு செய்யவும், பழைய உரை இடதுபுறமாக ஸ்லைடு செய்யவும் வேண்டும்.

முதலில், கீஃப்ரேம்களை வரையறுக்கவும்:

@keyframes slide-from-right {

  from { transform: translateX(100%); }

  to { transform: translateX(0); }

}

@keyframes slide-to-left {

  from { transform: translateX(0); }

  to { transform: translateX(-100%); }

}

இப்போது, 'article-content' என்ற பெயரிடப்பட்ட எலிமென்ட்டிற்கான பழைய மற்றும் புதிய சூடோ-எலிமென்ட்களுக்கு இந்த அனிமேஷன்களைப் பயன்படுத்துங்கள்.

::view-transition-old(article-content) {

  animation: 300ms ease-out forwards slide-to-left;

}

::view-transition-new(article-content) {

  animation: 300ms ease-out forwards slide-from-right;

}

தனிப்பயன் அனிமேஷன்: 3D ஃபிளிப்

ஒரு வியத்தகு விளைவுக்கு, நீங்கள் ஒரு 3D கார்டு ஃபிளிப்பை உருவாக்கலாம். இதற்கு transform பண்பை rotateY உடன் அனிமேட் செய்வதும், backface-visibility-ஐ நிர்வகிப்பதும் தேவை.

/* குழுவிற்கு ஒரு 3D சூழல் தேவை */

::view-transition-group(card-flipper) {

  transform-style: preserve-3d;

}

/* இமேஜ்-பெயரும் 3D சூழலைப் பாதுகாக்க வேண்டும் */

::view-transition-image-pair(card-flipper) {

  transform-style: preserve-3d;

}

/* பழைய வியூ 0 முதல் -180 டிகிரி வரை ஃபிளிப் ஆகிறது */

::view-transition-old(card-flipper) {

  animation: 600ms ease-in forwards flip-out;

  backface-visibility: hidden;

}

/* புதிய வியூ 180 முதல் 0 டிகிரி வரை ஃபிளிப் ஆகிறது */

::view-transition-new(card-flipper) {

  animation: 600ms ease-out forwards flip-in;

  backface-visibility: hidden;

}

@keyframes flip-out {

  from { transform: rotateY(0deg); }

  to { transform: rotateY(-180deg); }

}

@keyframes flip-in {

  from { transform: rotateY(180deg); }

  to { transform: rotateY(0deg); }

}

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் மேம்பட்ட நுட்பங்கள்

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

எடுத்துக்காட்டு: "மார்ஃபிங்" கார்டு சிறுபடம்

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

படி 1: பெயர்களை ஒதுக்குதல்

உங்கள் கேலரி பக்கத்தில், அவதார் படத்திற்கு ஒரு பெயர் கிடைக்கிறது. பெயர் ஒவ்வொரு கார்டுக்கும் தனித்துவமாக இருக்க வேண்டும், உதாரணமாக, பயனரின் ஐடியை அடிப்படையாகக் கொண்டது.

/* gallery-item.css-ல் */

.card-avatar { view-transition-name: avatar-user-123; }

சுயவிவர விவரப் பக்கத்தில், பெரிய ஹெடர் அவதாருக்கு அதே பெயர் கிடைக்கிறது.

/* profile-page.css-ல் */

.profile-header-avatar { view-transition-name: avatar-user-123; }

படி 2: அனிமேஷனைத் தனிப்பயனாக்குதல்

இயல்புநிலையாக, உலாவி அவதாரை நகர்த்தி அளவிடும், ஆனால் அது உள்ளடக்கத்தையும் கிராஸ்-ஃபேட் செய்யும். படம் ஒரே மாதிரியாக இருந்தால், இந்த ஃபேட் தேவையற்றது மற்றும் ஒரு சிறிய சிமிட்டலை ஏற்படுத்தக்கூடும். நாம் அதை முடக்கலாம்.

/* இங்கே உள்ள நட்சத்திரம் (*) எந்தவொரு பெயரிடப்பட்ட குழுவிற்கும் ஒரு வைல்டு கார்டு ஆகும் */

::view-transition-image-pair(*) {

  /* இயல்புநிலை ஃபேடை முடக்கு */

  animation-duration: 0s;

}

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

பக்க விகித மாற்றங்களைக் கையாளுதல்

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

இதற்கான தீர்வு நேர்த்தியானது. நாம் ::view-transition-group-ஐ அளவு மற்றும் நிலை மாற்றத்தைக் கையாள அனுமதிக்கிறோம், ஆனால் அதற்குள் உள்ள பழைய மற்றும் புதிய படங்களின் ஸ்டைலிங்கை மேலெழுதுகிறோம்.

இலக்கு, பழைய மற்றும் புதிய "ஸ்கிரீன்ஷாட்களை" சிதைக்காமல் அவற்றின் கொள்கலனை நிரப்ப வைப்பதாகும். அவற்றின் அகலம் மற்றும் உயரத்தை 100% ஆக அமைப்பதன் மூலமும், உலாவியின் இயல்புநிலை object-fit பண்பு (இது அசல் எலிமென்ட்டிலிருந்து பெறப்பட்டது) அளவிடுதலைச் சரியாகக் கையாள அனுமதிப்பதன் மூலமும் இதைச் செய்யலாம்.

::view-transition-old(hero-image),

::view-transition-new(hero-image) {

  /* சிதைவைத் தடுக்க கொள்கலனை நிரப்பு */

  width: 100%;

  height: 100%;

  

  /* விளைவைத் தெளிவாகக் காண இயல்புநிலை கிராஸ்-ஃபேடை மேலெழுது */

  animation: none;

}

இந்த CSS உடன், `image-pair` அதன் பக்க விகிதத்தை மென்மையாக அனிமேட் செய்யும், மேலும் உள்ளே உள்ள படங்கள் ஒரு சாதாரண கொள்கலனில் இருப்பது போலவே சரியாக க்ராப் செய்யப்படும் அல்லது லெட்டர்பாக்ஸ் செய்யப்படும் (அவற்றின் `object-fit` மதிப்பை பொறுத்து). பின்னர் நீங்கள் இந்த சரிசெய்யப்பட்ட வடிவவியலின் மேல், கிராஸ்-ஃபேட் போன்ற உங்கள் சொந்த தனிப்பயன் அனிமேஷன்களைச் சேர்க்கலாம்.

பிழைதிருத்தம் மற்றும் உலாவி ஆதரவு

ஒரு வினாடியின் ஒரு பகுதிக்கு மட்டுமே இருக்கும் எலிமென்ட்களை ஸ்டைல் செய்வது தந்திரமானதாக இருக்கும். அதிர்ஷ்டவசமாக, நவீன உலாவிகள் இதற்காக சிறந்த டெவலப்பர் கருவிகளை வழங்குகின்றன. Chrome அல்லது Edge DevTools-ல், நீங்கள் "Animations" பேனலுக்குச் செல்லலாம், நீங்கள் ஒரு வியூ ட்ரான்சிஷனைத் தூண்டும்போது, அதை இடைநிறுத்தலாம். அனிமேஷன் இடைநிறுத்தப்பட்ட நிலையில், நீங்கள் "Elements" பேனலைப் பயன்படுத்தி முழு `::view-transition` சூடோ-எலிமென்ட் மரத்தையும் DOM-இன் வேறு எந்தப் பகுதியையும் போலவே ஆய்வு செய்யலாம். பயன்படுத்தப்படும் ஸ்டைல்களைப் பார்க்கலாம் மற்றும் உங்கள் அனிமேஷன்களை hoàn thiện செய்ய நிகழ்நேரத்தில் அவற்றை மாற்றவும் செய்யலாம்.

2023-இன் பிற்பகுதியில், வியூ ட்ரான்சிஷன்ஸ் API குரோமியம் அடிப்படையிலான உலாவிகளில் (Chrome, Edge, Opera) ஆதரிக்கப்படுகிறது. Firefox மற்றும் Safari-க்கான செயலாக்கங்கள் செயல்பாட்டில் உள்ளன. இது முற்போக்கான மேம்பாட்டிற்கு ஒரு சரியான தேர்வாக அமைகிறது. ஆதரிக்கப்படும் உலாவிகளைக் கொண்ட பயனர்கள் ஒரு மகிழ்ச்சியான, மேம்பட்ட அனுபவத்தைப் பெறுகிறார்கள், அதே நேரத்தில் மற்ற உலாவிகளில் உள்ள பயனர்கள் நிலையான, உடனடி வழிசெலுத்தலைப் பெறுகிறார்கள். நீங்கள் CSS-ல் ஆதரவைச் சரிபார்க்கலாம்:

@supports (view-transition: none) {

  /* அனைத்து வியூ-ட்ரான்சிஷன் ஸ்டைல்களும் இங்கே செல்லும் */

  ::view-transition-old(my-element) { ... }

}

உலகளாவிய பார்வையாளர்களுக்கான சிறந்த நடைமுறைகள்

அனிமேஷன்களைச் செயல்படுத்தும்போது, உலகெங்கிலும் உள்ள பல்வேறு வகையான பயனர்கள் மற்றும் சாதனங்களைக் கருத்தில் கொள்வது மிகவும் முக்கியம்.

செயல்திறன்: அனிமேஷன்கள் வேகமாகவும் சீராகவும் இருக்க வேண்டும். உலாவிக்குச் செயலாக்க மலிவான CSS பண்புகளை அனிமேட் செய்வதில் ஒட்டிக்கொள்க, முதன்மையாக transform மற்றும் opacity. width, height, அல்லது margin போன்ற பண்புகளை அனிமேட் செய்வது ஒவ்வொரு ஃபிரேமிலும் லேஅவுட் மறுகணக்கீடுகளைத் தூண்டக்கூடும், இது குறிப்பாக குறைந்த சக்தி கொண்ட சாதனங்களில் திணறல் மற்றும் ஒரு மோசமான அனுபவத்திற்கு வழிவகுக்கும்.

அணுகல்தன்மை: சில பயனர்கள் அனிமேஷன்களால் இயக்க நோய் அல்லது அசௌகரியத்தை அனுபவிக்கிறார்கள். அனைத்து முக்கிய இயக்க முறைமைகளும் இயக்கத்தைக் குறைப்பதற்கான ஒரு பயனர் விருப்பத்தை வழங்குகின்றன. நாம் இதை மதிக்க வேண்டும். prefers-reduced-motion மீடியா குவரி இந்த பயனர்களுக்காக உங்கள் அனிமேஷன்களை முடக்க அல்லது எளிதாக்க உங்களை அனுமதிக்கிறது.

@media (prefers-reduced-motion: reduce) {

  ::view-transition-group(*),

  ::view-transition-old(*),

  ::view-transition-new(*) {

    /* அனைத்து தனிப்பயன் அனிமேஷன்களையும் தவிர்த்து, விரைவான, எளிய ஃபேடைப் பயன்படுத்தவும் */

    animation: none !important;

  }

}

பயனர் அனுபவம் (UX): நல்ல மாற்றங்கள் நோக்கமுள்ளவை. அவை பயனரின் கவனத்தை வழிநடத்த வேண்டும் மற்றும் UI-ல் நடக்கும் மாற்றம் பற்றிய சூழலை வழங்க வேண்டும். மிகவும் மெதுவான ஒரு அனிமேஷன் ஒரு செயலியை மந்தமாக உணர வைக்கும், அதே நேரத்தில் மிகவும் பகட்டான ஒன்று கவனத்தை சிதறடிக்கும். 200ms முதல் 500ms வரையிலான மாற்ற கால அளவுகளை நோக்கமாகக் கொள்ளுங்கள். அனிமேஷன் காணப்படுவதை விட அதிகமாக உணரப்பட வேண்டும் என்பதே குறிக்கோள்.

முடிவு: எதிர்காலம் சீரானது

CSS வியூ ட்ரான்சிஷன்ஸ் API, மற்றும் குறிப்பாக அதன் சக்திவாய்ந்த சூடோ-எலிமென்ட் மரம், வலை பயனர் இடைமுகங்களுக்கு ஒரு மகத்தான முன்னேற்றத்தைக் குறிக்கிறது. இது டெவலப்பர்களுக்கு ஒரு நேட்டிவ், செயல்திறன் மிக்க மற்றும் மிகவும் தனிப்பயனாக்கக்கூடிய கருவித்தொகுப்பை வழங்குகிறது, இது ஒரு காலத்தில் நேட்டிவ் செயலிகளின் பிரத்யேக களமாக இருந்த வகையான சீரான, நிலைமாற்ற மாற்றங்களை உருவாக்க உதவுகிறது. ::view-transition, ::view-transition-group, மற்றும் பழைய/புதிய இமேஜ் ஜோடிகளின் பாத்திரங்களைப் புரிந்துகொள்வதன் மூலம், நீங்கள் எளிய மங்கல்களைத் தாண்டி, பயன்பாட்டினை மேம்படுத்தி பயனர்களை மகிழ்விக்கும் சிக்கலான, அர்த்தமுள்ள அனிமேஷன்களை ஒருங்கிணைக்க முடியும்.

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