30 ஆகஸ்ட், 2025தமிழ்

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

CSS வியூ டிரான்சிஷன் API: மென்மையான பக்க வழிசெலுத்தல் செயலாக்கத்திற்கான முழுமையான வழிகாட்டி

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

இரண்டிலும் சிறந்ததை நாம் பெற்றால் என்ன செய்வது? பல-பக்க பயன்பாட்டின் (MPA) எளிய, சர்வரில் இருந்து வழங்கப்படும் கட்டமைப்பு மற்றும் ஒரு SPA-வின் நேர்த்தியான, அர்த்தமுள்ள மாற்றங்கள். இதுதான் CSS வியூ டிரான்சிஷன் API-இன் வாக்குறுதி, இது வலையில் பயனர் அனுபவங்களைப் பற்றி நாம் சிந்திக்கும் மற்றும் உருவாக்கும் முறையை புரட்சிகரமாக்கவிருக்கும் ஒரு அற்புதமான உலாவி அம்சமாகும்.

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

CSS வியூ டிரான்சிஷன் API என்றால் என்ன?

CSS வியூ டிரான்சிஷன் API என்பது வலை தளத்தில் நேரடியாக கட்டமைக்கப்பட்ட ஒரு பொறிமுறையாகும், இது டெவலப்பர்களுக்கு வெவ்வேறு DOM (Document Object Model) நிலைகளுக்கு இடையில் அனிமேஷன் செய்யப்பட்ட மாற்றங்களை உருவாக்க அனுமதிக்கிறது. அதன் மையத்தில், இது ஒரு காட்சியிலிருந்து மற்றொரு காட்சிக்கு மாறும் காட்சி மாற்றத்தை நிர்வகிக்க ஒரு எளிய வழியை வழங்குகிறது, அந்த மாற்றம் ஒரே பக்கத்தில் (ஒரு SPA-வில்) நடந்தாலும் அல்லது இரண்டு வெவ்வேறு ஆவணங்களுக்கு இடையில் (ஒரு MPA-வில்) நடந்தாலும் சரி.

இந்த செயல்முறை குறிப்பிடத்தக்க புத்திசாலித்தனமானது. ஒரு மாற்றம் தூண்டப்படும்போது, உலாவி:

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

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

இது ஏன் வலை மேம்பாட்டிற்கு ஒரு திருப்புமுனை

இந்த API-இன் அறிமுகம் மற்றொரு படிப்படியான புதுப்பிப்பு மட்டுமல்ல; இது வலை தளத்திற்கான ஒரு அடிப்படை மேம்பாட்டைக் குறிக்கிறது. உலகெங்கிலும் உள்ள டெவலப்பர்களுக்கும் பயனர்களுக்கும் இது ஏன் மிகவும் முக்கியமானது என்பது இங்கே:

வியத்தகு முறையில் மேம்படுத்தப்பட்ட பயனர் அனுபவம் (UX): மென்மையான மாற்றங்கள் வெறும் அழகுக்காக மட்டுமல்ல. அவை காட்சி தொடர்ச்சியை வழங்குகின்றன, வெவ்வேறு காட்சிகளுக்கு இடையிலான உறவைப் புரிந்துகொள்ள பயனர்களுக்கு உதவுகின்றன. ஒரு சிறுபடத்திலிருந்து முழு அளவு படமாக தடையின்றி வளரும் ஒரு கூறு சூழலை வழங்குகிறது மற்றும் பயனரின் கவனத்தை ஈர்க்கிறது, இது இடைமுகத்தை மேலும் உள்ளுணர்வு மற்றும் பதிலளிக்கக்கூடியதாக உணர வைக்கிறது.
மிகவும் எளிமைப்படுத்தப்பட்ட மேம்பாடு: இந்த API-க்கு முன்பு, இதேபோன்ற விளைவுகளை அடைய கனமான ஜாவாஸ்கிரிப்ட் லைப்ரரிகள் (Framer Motion அல்லது GSAP போன்றவை) அல்லது சிக்கலான CSS-in-JS தீர்வுகள் தேவைப்பட்டன. வியூ டிரான்சிஷன் API இந்த சிக்கலை ஒரு எளிய செயல்பாட்டு அழைப்பு மற்றும் சில வரிகள் CSS உடன் மாற்றுகிறது, அழகான, செயலி போன்ற அனுபவங்களை உருவாக்குவதற்கான நுழைவுத் தடையைக் குறைக்கிறது.
சிறந்த செயல்திறன்: அனிமேஷன் தர்க்கத்தை உலாவியின் ரெண்டரிங் இயந்திரத்திற்கு மாற்றுவதன் மூலம், வியூ டிரான்சிஷன்கள் அவற்றின் ஜாவாஸ்கிரிப்ட்-சார்ந்த சக பயணிகளை விட அதிக செயல்திறன் மற்றும் பேட்டரி-திறன் கொண்டவையாக இருக்க முடியும். உலாவி இந்த செயல்முறையை கைமுறையாக மீண்டும் செய்வது கடினமான வழிகளில் மேம்படுத்த முடியும்.
SPA-MPA பிளவைக் குறைத்தல்: ஒருவேளை மிகவும் உற்சாகமான அம்சம் கிராஸ்-டாக்குமென்ட் டிரான்சிஷன்களுக்கான அதன் ஆதரவு ஆகும். இது பாரம்பரிய, சர்வரில் வழங்கப்படும் வலைத்தளங்கள் (MPAs) நீண்ட காலமாக SPAs-க்கு பிரத்தியேகமானதாகக் கருதப்பட்ட மென்மையான வழிசெலுத்தலைப் பின்பற்ற அனுமதிக்கிறது. வணிகங்கள் இப்போது ஒரு முழுமையான SPA கட்டமைப்பிற்கு செலவு மற்றும் சிக்கலான கட்டமைப்பு மாற்றத்தை மேற்கொள்ளாமல், தங்கள் தற்போதைய வலைத்தளங்களை நவீன UX முறைகளுடன் மேம்படுத்தலாம்.

முக்கியக் கருத்துக்கள்: வியூ டிரான்சிஷன்களுக்குப் பின்னால் உள்ள மேஜிக்கைப் புரிந்துகொள்ளுதல்

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

ஜாவாஸ்கிரிப்ட் நுழைவுப் புள்ளி: `document.startViewTransition()`

எல்லாம் ஒரு ஒற்றை ஜாவாஸ்கிரிப்ட் செயல்பாட்டில் தொடங்குகிறது: `document.startViewTransition()`. இந்த செயல்பாடு ஒரு கால்பேக்கை வாதமாக எடுத்துக்கொள்கிறது. இந்த கால்பேக்கிற்குள், பழைய நிலையிலிருந்து புதிய நிலைக்குச் செல்லத் தேவையான அனைத்து DOM கையாளுதல்களையும் நீங்கள் செய்கிறீர்கள்.

ஒரு பொதுவான அழைப்பு இப்படி இருக்கும்:

// முதலில், உலாவி API-ஐ ஆதரிக்கிறதா என்று சரிபார்க்கவும்
if (!document.startViewTransition) {
  // ஆதரிக்கப்படவில்லை என்றால், DOM-ஐ நேரடியாகப் புதுப்பிக்கவும்
  updateTheDOM();
} else {
  // ஆதரிக்கப்பட்டால், DOM புதுப்பிப்பை டிரான்சிஷன் செயல்பாட்டிற்குள் வைக்கவும்
  document.startViewTransition(() => {
    updateTheDOM();
  });
}

நீங்கள் `startViewTransition`-ஐ அழைக்கும்போது, உலாவி முன்பு விவரிக்கப்பட்ட பிடிப்பு-புதுப்பிப்பு-அனிமேட் வரிசையைத் தொடங்குகிறது. இந்த செயல்பாடு ஒரு `ViewTransition` ஆப்ஜெக்டை வழங்குகிறது, இது மேம்பட்ட கட்டுப்பாட்டிற்காக டிரான்சிஷன் வாழ்க்கைச் சுழற்சியின் வெவ்வேறு நிலைகளில் இணைக்க உங்களை அனுமதிக்கும் ப்ராமிஸ்களைக் கொண்டுள்ளது.

CSS சூடோ-எலிமென்ட் ட்ரீ

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

::view-transition: ட்ரீ-யின் ரூட், முழு வியூபோர்ட்டையும் உள்ளடக்கியது. டிரான்சிஷனுக்கான பின்னணி நிறம் அல்லது கால அளவை அமைக்க இதைப் பயன்படுத்தலாம்.
::view-transition-group(name): ஒரு ஒற்றை டிரான்சிஷன் ஆகும் எலிமென்ட்டைக் குறிக்கிறது. அனிமேஷன் போது எலிமென்ட்டின் நிலை மற்றும் அளவுக்கு இது பொறுப்பாகும்.
::view-transition-image-pair(name): ஒரு எலிமென்ட்டின் பழைய மற்றும் புதிய காட்சிகளுக்கான ஒரு கொள்கலன். இது ஒரு தனிமைப்படுத்தும் `mix-blend-mode` ஆக ஸ்டைல் செய்யப்பட்டுள்ளது.
::view-transition-old(name): அதன் பழைய நிலையில் உள்ள எலிமென்ட்டின் ஸ்கிரீன்ஷாட் (உதாரணமாக, சிறுபடம்).
::view-transition-new(name): அதன் புதிய நிலையில் உள்ள எலிமென்ட்டின் நேரடி பிரதிநிதித்துவம் (உதாரணமாக, முழு அளவு படம்).

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

நடைமுறைச் செயலாக்கம்: உங்கள் முதல் வியூ டிரான்சிஷன் (SPA உதாரணம்)

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

படி 1: HTML கட்டமைப்பு

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

<div id="app-container">
  <div class="list-view">
    
    <div class="card" data-id="item-1">
      <img src="thumbnail-1.jpg" alt="Item 1">
      <h3>Product One</h3>
    </div>
    
  </div>   <div class="detail-view" hidden>
    <img src="large-1.jpg" alt="Item 1">
    <h1>Product One</h1>
    <p>Detailed description here...</p>
    <button id="back-button">Back</button>
  </div>
</div>

படி 2: ஒரு `view-transition-name`-ஐ ஒதுக்குங்கள்

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

.card.active img {
view-transition-name: product-image;
} .detail-view.active img {
view-transition-name: product-image;
}

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

படி 3: ஜாவாஸ்கிரிப்ட் தர்க்கம்

இப்போது, DOM புதுப்பிப்பைக் கையாளும் செயல்பாட்டை எழுதி, அதை `document.startViewTransition()`-க்குள் வைப்போம்.

function showDetailView(itemId) {
  const updateDOM = () => {
    // சரியான கார்டு மற்றும் விரிவான காட்சிக்கு 'active' கிளாஸைச் சேர்க்கவும்
    // இது CSS வழியாக view-transition-name-ஐயும் ஒதுக்குகிறது
    document.querySelector(`.card[data-id='${itemId}']`).classList.add('active');
    document.querySelector('.detail-view').classList.add('active');     // பட்டியலை மறைத்து விரிவான காட்சியைக் காட்டவும்
    document.querySelector('.list-view').hidden = true;
    document.querySelector('.detail-view').hidden = false;
  };   if (!document.startViewTransition) {
    updateDOM();
    return;
  }   document.startViewTransition(() => updateDOM());
}

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

அடுத்த எல்லை: MPAs-க்கான கிராஸ்-டாக்குமென்ட் வியூ டிரான்சிஷன்கள்

இங்குதான் API உண்மையிலேயே உருமாறுகிறது. இந்த மென்மையான மாற்றங்களை பாரம்பரிய பல-பக்க பயன்பாடுகளுக்கு (MPAs) பயன்படுத்துவது முன்பு அவற்றை SPAs ஆக மாற்றாமல் சாத்தியமற்றதாக இருந்தது. இப்போது, இது ஒரு எளிய opt-in ஆகும்.

கிராஸ்-டாக்குமென்ட் டிரான்சிஷன்களை இயக்குதல்

வெவ்வேறு பக்கங்களுக்கு இடையேயான வழிசெலுத்தல்களுக்கான டிரான்சிஷன்களை இயக்க, நீங்கள் மூல மற்றும் இலக்குப் பக்கங்கள் *இரண்டின்* CSS-லும் ஒரு எளிய CSS at-rule-ஐ சேர்க்கிறீர்கள்:

@view-transition {
navigation: auto;
}

அவ்வளவுதான். இந்த விதி இருக்கும்போது, உலாவி தானாகவே அனைத்து ஒரே-மூல வழிசெலுத்தல்களுக்கும் ஒரு வியூ டிரான்சிஷனை (இயல்புநிலை கிராஸ்-ஃபேட்) பயன்படுத்தும்.

முக்கியமானது: ஒரு நிலையான `view-transition-name`

SPA எடுத்துக்காட்டில் உள்ளதைப் போலவே, இரண்டு தனித்தனி பக்கங்களில் உள்ள எலிமென்ட்களை இணைக்கும் மேஜிக், பகிரப்பட்ட, தனித்துவமான `view-transition-name`-ஐ நம்பியுள்ளது. ஒரு தயாரிப்பு பட்டியல் பக்கம் (`/products`) மற்றும் ஒரு தயாரிப்பு விரிவான பக்கம் (`/products/item-1`) இருப்பதாக கற்பனை செய்து கொள்வோம்.

`products.html`-ல்:

<a href="/products/item-1">
<img src="thumbnail-1.jpg" style="view-transition-name: product-image-1;">
</a>

`product-detail.html`-ல்:

<div class="hero">
<img src="large-1.jpg" style="view-transition-name: product-image-1;">
</div>

ஒரு பயனர் முதல் பக்கத்தில் உள்ள இணைப்பைக் கிளிக் செய்யும்போது, `view-transition-name: product-image-1` உடன் ஒரு எலிமென்ட் பக்கத்தை விட்டு வெளியேறுவதை உலாவி பார்க்கிறது. பின்னர் அது புதிய பக்கம் ஏற்றப்படும் வரை காத்திருக்கிறது. இரண்டாவது பக்கம் ரெண்டர் ஆகும்போது, அது அதே `view-transition-name` உடன் ஒரு எலிமென்ட்டைக் கண்டுபிடித்து, இரண்டிற்கும் இடையில் தானாகவே ஒரு மென்மையான உருமாறும் அனிமேஷனை உருவாக்குகிறது. பக்கத்தின் மற்ற உள்ளடக்கம் ஒரு நுட்பமான கிராஸ்-ஃபேடிற்கு இயல்பாக மாறுகிறது. இது MPAs-க்கு முன்பு நினைத்துப் பார்க்க முடியாத வேகம் மற்றும் தொடர்ச்சியின் ஒரு உணர்வை உருவாக்குகிறது.

மேம்பட்ட நுட்பங்கள் மற்றும் தனிப்பயனாக்கங்கள்

இயல்புநிலை கிராஸ்-ஃபேட் நேர்த்தியானது, ஆனால் API CSS அனிமேஷன்கள் மூலம் ஆழமான தனிப்பயனாக்க இணைப்புகளை வழங்குகிறது.

CSS உடன் அனிமேஷன்களைத் தனிப்பயனாக்குதல்

நீங்கள் நிலையான CSS `@keyframes` மற்றும் `animation` பண்புகளுடன் சூடோ-எலிமென்ட்களை இலக்கு வைத்து இயல்புநிலை அனிமேஷன்களை மீறலாம்.

உதாரணமாக, புதிய பக்க உள்ளடக்கத்திற்கு "வலமிருந்து ஸ்லைடு-இன்" விளைவை உருவாக்க:

@keyframes slide-from-right {
from { transform: translateX(100%); }
} ::view-transition-new(root) {
animation: slide-from-right 0.5s ease-out;
}

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

கிளாஸ்கள் மூலம் டிரான்சிஷன் வகைகளைக் கட்டுப்படுத்துதல்

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

'பின்' பொத்தானுக்கான ஜாவாஸ்கிரிப்ட்:

backButton.addEventListener('click', (event) => {
  event.preventDefault();
  document.documentElement.classList.add('is-going-back');
  document.startViewTransition(() => {
    // பின்னோக்கிச் செல்ல தர்க்கம்
    Promise.resolve().then(() => {
      document.documentElement.classList.remove('is-going-back');
    });
  });
});

வெவ்வேறு அனிமேஷன்களை வரையறுக்க CSS:

/* இயல்புநிலை முன்னோக்கி அனிமேஷன் */
::view-transition-new(root) {
animation: slide-from-right 0.5s;
} /* பின்னோக்கி அனிமேஷன் */
.is-going-back::view-transition-new(root) {
animation: slide-from-left 0.5s;
}

இந்த சக்திவாய்ந்த பேட்டர்ன் பயனரின் வழிசெலுத்தல் அனுபவத்தின் மீது நுணுக்கமான கட்டுப்பாட்டை வழங்குகிறது.

அணுகல்தன்மை பரிசீலனைகள்

ஒரு நவீன வலை API வலுவான அணுகல்தன்மை உள்ளமைக்கப்படாமல் முழுமையடையாது, மேலும் வியூ டிரான்சிஷன் API அதை வழங்குகிறது.

பயனர் விருப்பங்களை மதித்தல்: API தானாகவே `prefers-reduced-motion` மீடியா வினவலை மதிக்கிறது. ஒரு பயனர் தங்கள் இயக்க முறைமை அமைப்புகளில் குறைந்த இயக்கத்தை விரும்புவதாகக் குறிப்பிட்டிருந்தால், டிரான்சிஷன் தவிர்க்கப்பட்டு, DOM புதுப்பிப்பு உடனடியாக நடக்கும். இது டெவலப்பரிடமிருந்து கூடுதல் வேலை தேவைப்படாமல் இயல்பாகவே நடக்கும்.
கவனத்தை பராமரித்தல்: டிரான்சிஷன்கள் முற்றிலும் காட்சி சார்ந்தவை. அவை நிலையான ஃபோகஸ் நிர்வாகத்தில் தலையிடாது. ஒரு டிரான்சிஷனுக்குப் பிறகு, விசைப்பலகை ஃபோகஸ் புதிய காட்சியில் ஒரு தர்க்கரீதியான எலிமென்ட்டிற்கு, அதாவது முக்கிய தலைப்பு அல்லது முதல் ஊடாடும் எலிமென்ட்டிற்கு நகர்த்தப்படுவதை உறுதி செய்வது டெவலப்பரின் பொறுப்பாகும்.
செமண்டிக் HTML: API ஒரு மேம்படுத்தல் அடுக்கு. உங்கள் அடிப்படை HTML செமண்டிக் மற்றும் அணுகக்கூடியதாக இருக்க வேண்டும். ஒரு ஸ்கிரீன் ரீடர் அல்லது ஆதரவற்ற உலாவி உள்ள ஒரு பயனர் டிரான்சிஷன் இல்லாமல் உள்ளடக்கத்தை அனுபவிப்பார், எனவே கட்டமைப்பு தானாகவே அர்த்தமுள்ளதாக இருக்க வேண்டும்.

உலாவி ஆதரவு மற்றும் படிப்படியான மேம்பாடு

2023-இன் பிற்பகுதியில், SPAs-க்கான வியூ டிரான்சிஷன் API குரோமியம் அடிப்படையிலான உலாவிகளில் (Chrome, Edge, Opera) ஆதரிக்கப்படுகிறது. MPAs-க்கான கிராஸ்-டாக்குமென்ட் டிரான்சிஷன்கள் ஒரு அம்சக் கொடியின் பின்னால் கிடைக்கின்றன மற்றும் தீவிரமாக உருவாக்கப்பட்டு வருகின்றன.

API ஆனது படிப்படியான மேம்பாட்டிற்காக ஆரம்பத்திலிருந்தே வடிவமைக்கப்பட்டது. நாம் முன்பு பயன்படுத்திய கார்டு பேட்டர்ன் தான் முக்கியமானது:

if (!document.startViewTransition) { ... }

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

வலை வழிசெலுத்தலின் எதிர்காலம்

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

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

முடிவுரை: இன்றே மென்மையான அனுபவங்களை உருவாக்கத் தொடங்குங்கள்

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

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

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