ویژگی view-transition-name در CSS: ایجاد انیمیشن‌های انتقال صفحه زیبا و روان

View Transitions API به مرورگر اجازه می دهد تا دو “نما” (View) از یک صفحه یا برنامه را در نظر بگیرد: نمای قبل از تغییر و نمای بعد از تغییر. هنگامی که یک تغییر در DOM رخ می دهد (مثلاً ناوبری به صفحه جدید، یا به روزرسانی بخشی از صفحه)، مرورگر می تواند یک انیمیشن انتقال بین این دو نما ایجاد کند.

 

ویژگی view-transition-name نقش کلیدی در این فرآیند ایفا می کند:

• شناسایی عناصر: شما به عناصری که می خواهید در انتقال شرکت داده شوند، یک نام منحصر به فرد با استفاده از view-transition-name اختصاص می دهید.
• انتقال معنایی: مرورگر با مقایسه عناصر دارای نام مشابه در نمای قبل و بعد، می تواند بفهمد که کدام عناصر باید جابجا شوند، تغییر اندازه دهند، یا انیمیشن دیگری را تجربه کنند.
• انیمیشن های CSS: این انتقال ها معمولاً با استفاده از انیمیشن های CSS (مانند transition یا animation) مدیریت می شوند. مرورگر به طور خودکار یک " Snapshot" (تصویر لحظه ای) از عناصر قبل از تغییر و بعد از تغییر می گیرد و انیمیشن را بین آن ها اعمال می کند.

سینتکس:

شما view-transition-name را مانند هر ویژگی CSS دیگری به عنصر مورد نظر اعمال می کنید:

.element-to-animate {
  view-transition-name: my-unique-name;
}

نکات سینتکسی:

• مقدار: مقدار view-transition-name باید یک رشته معتبر CSS باشد. این نام باید منحصر به فرد باشد و معمولاً از حروف الفبا، اعداد، خط تیره (-) و زیرخط (_) تشکیل می شود.
• اعمال بر روی عناصر: این ویژگی را می توان بر روی هر عنصری که در DOM قابل مشاهده است، اعمال کرد.
• تداخل نام ها: اگر دو عنصر در یک نمای یکسان، نام view-transition-name یکسانی داشته باشند، رفتار مرورگر ممکن است غیرقابل پیش بینی باشد. اطمینان حاصل کنید که نام ها منحصر به فرد هستند.

مثال ساده:

فرض کنید یک لیست از محصولات دارید و می خواهید هنگام کلیک روی یک محصول، جزئیات آن با انیمیشن نمایش داده شود.

HTML:

<div class="product-list">
  <div class="product-item">
    <img src="product1.jpg" alt="محصول ۱" class="product-image">
    <h3 class="product-title">محصول اول</h3>
  </div>
  <div class="product-item">
    <img src="product2.jpg" alt="محصول ۲" class="product-image">
    <h3 class="product-title">محصول دوم</h3>
  </div>
</div>

<div class="product-detail" style="display: none;">
  <img src="product1.jpg" alt="محصول ۱" class="product-image">
  <h3 class="product-title">محصول اول</h3>
  <p>جزئیات بیشتر محصول اول...</p>
</div>

CSS (با استفاده از View Transitions API):

/* نام گذاری عناصر برای انتقال */
.product-image {
  view-transition-name: product-image-transition; /* نام یکسان برای تصویر در لیست و جزئیات */
}

.product-title {
  view-transition-name: product-title-transition; /* نام یکسان برای عنوان در لیست و جزئیات */
}

/* استایل های مربوط به انیمیشن انتقال (این بخش توسط مرورگر مدیریت می شود) */
/* اما شما می توانید انیمیشن های سفارشی را نیز با استفاده از @keyframes و @transition تعریف کنید */

جاوا اسکریپت (برای فعال کردن انتقال):

document.addEventListener('astro:after-swap', () => { // یا رویداد مشابه بسته به فریمورک
  // اطمینان از اینکه نام ها به درستی اعمال شده اند
  document.querySelectorAll('.product-item').forEach(item => {
    const img = item.querySelector('.product-image');
    const title = item.querySelector('.product-title');
    if (img) img.style.setProperty('view-transition-name', 'product-image-transition');
    if (title) title.style.setProperty('view-transition-name', 'product-title-transition');
  });

  document.querySelector('.product-detail .product-image')?.style.setProperty('view-transition-name', 'product-image-transition');
  document.querySelector('.product-detail .product-title')?.style.setProperty('view-transition-name', 'product-title-transition');
});

document.addEventListener('astro:page-load', () => { // یا رویداد مشابه
  document.querySelectorAll('.product-item').forEach(item => {
    item.addEventListener('click', () => {
      // شبیه سازی نمایش جزئیات (در یک SPA واقعی، این کار توسط router انجام می شود)
      document.querySelector('.product-list').style.display = 'none';
      document.querySelector('.product-detail').style.display = 'block';
      // فعال کردن View Transition API
      document.startViewTransition(() => {
        // در اینجا کارهایی که باعث تغییر DOM می شوند انجام می شوند
        // (مثلاً نمایش/پنهان کردن عناصر، ناوبری به صفحه دیگر)
        // در این مثال ساده، تغییر display قبلا انجام شده است.
      });
    });
  });
});

نکته: پیاده سازی کامل View Transitions API معمولاً نیازمند پشتیبانی فریمورک های جاوا اسکریپت (مانند React, Vue, Astro) یا مدیریت دستی تغییرات DOM با جاوا اسکریپت است.

ویژگی view-transition-name در CSS، دریچه ای به سوی ایجاد انیمیشن های انتقال صفحه و بین نماها (view transitions) بسیار خلاقانه و روان باز می کند. در اینجا چند سناریو و کاربرد رایج آورده شده است:

 

1. انتقال کارت به صفحه جزئیات (Card-to-Detail Transition):

   • این یکی از رایج ترین و چشم نوازترین کاربردهاست. هنگامی که کاربر روی یک کارت محصول یا مقاله کلیک می کند، تصویر یا عنوان آن کارت می تواند به طور روان به موقعیت و اندازه خود در صفحه جزئیات منتقل شود. view-transition-name به مرورگر کمک می کند تا این ارتباط را تشخیص دهد.

2. جابجایی عناصر بین بخش ها:

   • در برنامه های تک صفحه ای (SPAs)، ممکن است نیاز داشته باشید عناصری را بین بخش های مختلف (مانند جابجایی یک آیکون از یک پنل به پنل دیگر) انیمیت کنید. با نام گذاری یکسان عناصر در هر دو حالت، می توانید این جابجایی را به صورت معنایی و روان انجام دهید.

3. تغییر چیدمان (Layout Shifts) با انیمیشن:

   • وقتی چیدمان صفحه تغییر می کند (مثلاً از حالت گرید به لیست)، عناصری که نام view-transition-name یکسانی دارند، می توانند به طور خودکار بین موقعیت های جدید خود انیمیت شوند.

4. انتقال بین صفحات (Cross-Page Transitions):

   • با استفاده از View Transitions API در سطح بالاتر (نه فقط view-transition-name)، می توانید انیمیشن های انتقال بین صفحات کامل وب سایت خود را مدیریت کنید. view-transition-name در این حالت به شناسایی عناصر مشترک بین دو صفحه کمک می کند تا بتوانند بخشی از این انتقال بزرگتر باشند.

5. تغییر حالت (State Changes) با انیمیشن:

   • فرض کنید یک دکمه “لایک” دارید که وضعیت آن از “خالی” به “پر” تغییر می کند. اگر این تغییر را با یک انیمیشن کوچک همراه کنید (مثلاً تغییر شکل آیکون)، view-transition-name می تواند به مدیریت این انیمیشن کمک کند.

6. انتقال های سفارشی:

   • علاوه بر انیمیشن های پیش فرض که مرورگر ایجاد می کند، شما می توانید با استفاده از CSS Animations و Transitions، انیمیشن های سفارشی را برای عناصری که view-transition-name دارند، تعریف کنید. این به شما کنترل کامل بر ظاهر انتقال می دهد.

مثال پیشرفته تر (ایده): فرض کنید در یک گالری عکس هستید و روی یک عکس کوچک کلیک می کنید. می خواهید عکس کوچک به عکس بزرگ در صفحه جزئیات تبدیل شود.

• HTML:

  <div class="gallery">
    <img src="thumb1.jpg" class="gallery-thumbnail" view-transition-name="gallery-image-1">
    <img src="thumb2.jpg" class="gallery-thumbnail" view-transition-name="gallery-image-2">
    </div>
  
  <div class="detail-view" style="display: none;">
    <img src="full1.jpg" class="detail-image" view-transition-name="gallery-image-1">
    <p>توضیحات عکس اول...</p>
  </div>
  

• CSS:

  .gallery-thumbnail {
    /* استایل های thumbnail */
    transition: view-transition-name 0.5s ease-in-out; /* این خط صرفا برای نمایش است، نامگذاری واقعی در JS انجام می شود */
  }
  .detail-image {
    /* استایل های تصویر بزرگ */
    transition: view-transition-name 0.5s ease-in-out; /* این خط صرفا برای نمایش است */
  }
  
  /* برای انیمیشن های سفارشی */
  @keyframes scale-up { from { transform: scale(0.5); } to { transform: scale(1); } }
  @keyframes move-to-center { from { transform: translateX(100px); } to { transform: translateX(0); } }
  
  ::view-transition-old(gallery-image-1) { /* عنصر قدیمی */
    animation: scale-down 0.5s ease-out forwards, move-to-corner 0.5s ease-out forwards;
  }
  ::view-transition-new(gallery-image-1) { /* عنصر جدید */
    animation: scale-up 0.5s ease-in forwards, move-to-center 0.5s ease-in forwards;
  }
  

• JavaScript: کد جاوا اسکریپت مسئول جابجایی بین حالت ها و فعال کردن startViewTransition خواهد بود و اطمینان حاصل می کند که view-transition-name به درستی روی عناصر اعمال شده است.

این قابلیت به طور چشمگیری پیچیدگی ایجاد انیمیشن های رابط کاربری را کاهش می دهد و به طراحان و توسعه دهندگان اجازه می دهد تا تجربیات کاربری بسیار جذاب تری خلق کنند.

View Transitions API و ویژگی view-transition-name یک قابلیت نسبتاً جدید در دنیای CSS و جاوا اسکریپت هستند. بنابراین، درک وضعیت پشتیبانی مرورگرها و ملاحظات مربوط به آن برای پیاده سازی موفق ضروری است.

 

پشتیبانی مرورگر:

• Chrome: پشتیبانی کامل از View Transitions API (شامل view-transition-name) از نسخه 111 به بعد.
• Edge: پشتیبانی کامل (به دلیل اشتراک در موتور Blink با Chrome).
• Firefox: در حال حاضر (تا اوایل سال 2024)، View Transitions API به صورت پایدار در فایرفاکس پشتیبانی نمی شود، اما در حال توسعه است و ممکن است به صورت آزمایشی (experimental) در دسترس باشد.
• Safari: در حال حاضر (تا اوایل سال 2024)، پشتیبانی پایداری برای View Transitions API وجود ندارد.

نحوه بررسی پشتیبانی: می توانید از وب سایت هایی مانند Can I Use (caniuse.com) برای بررسی آخرین وضعیت پشتیبانی مرورگرها برای “View Transitions API” استفاده کنید.

ملاحظات مهم برای پیاده سازی:

1. مرورگرهای پشتیبانی کننده:

   • اگر هدف شما ارائه تجربه کاربری عالی در مرورگرهای مدرن (مانند Chrome و Edge) است، می توانید با اطمینان از View Transitions API استفاده کنید.
   • برای مرورگرهایی که پشتیبانی نمی کنند، باید یک fallback (جایگزین) در نظر بگیرید. این fallback می تواند به سادگی عدم نمایش انیمیشن باشد، یا از روش های قدیمی تر CSS/JS برای ایجاد یک انتقال ساده تر استفاده کنید.

2. پیاده سازی در برنامه های تک صفحه ای (SPAs):

   • View Transitions API به طور طبیعی با SPA ها همخوانی دارد، زیرا تغییرات DOM در این برنامه ها بدون بارگذاری مجدد کامل صفحه رخ می دهد. فریمورک های جاوا اسکریپت مدرن (مانند React, Vue, Astro, Svelte) شروع به ادغام یا ارائه راه حل هایی برای استفاده آسان تر از این API کرده اند.
   • نکته: برای فعال کردن View Transitions، معمولاً نیاز به فراخوانی document.startViewTransition(() => { ... }) در جاوا اسکریپت دارید. کد داخل تابع، تغییرات DOM را انجام می دهد و مرورگر انیمیشن را مدیریت می کند.

3. نام گذاری منحصر به فرد:

   • همانطور که قبلاً ذکر شد، اطمینان حاصل کنید که هر عنصری که از view-transition-name استفاده می کند، نامی منحصر به فرد در هر نمای DOM داشته باشد. اگر دو عنصر در یک نمای یکسان نام یکسانی داشته باشند، نتیجه ممکن است غیرمنتظره باشد.

4. استفاده از ::view-transition-old() و ::view-transition-new():

   • برای کنترل دقیق تر انیمیشن ها، می توانید از شبه عناصر CSS ::view-transition-old(name) و ::view-transition-new(name) استفاده کنید. این به شما امکان می دهد تا انیمیشن های سفارشی را برای عناصر ورودی و خروجی اعمال کنید.
   • مثال:

     ::view-transition-old(gallery-image-1) {
       /* انیمیشن برای تصویر هنگام خروج از نمای قبلی */
       opacity: 0;
       transform: scale(0.8);
       transition: opacity 0.3s, transform 0.3s;
     }
     ::view-transition-new(gallery-image-1) {
       /* انیمیشن برای تصویر هنگام ورود به نمای جدید */
       opacity: 1;
       transform: scale(1);
       transition: opacity 0.3s, transform 0.3s;
     }
     

5. تأثیر بر عملکرد:

   • در حالی که View Transitions API می تواند تجربه کاربری را بهبود بخشد، انیمیشن های پیچیده ممکن است بر عملکرد تأثیر بگذارند، به خصوص در دستگاه های ضعیف تر. همیشه انیمیشن های خود را تست کنید و از بهینه سازی آن ها اطمینان حاصل کنید.

6. دسترسی پذیری (Accessibility):

   • کاربرانی که ترجیح می دهند انیمیشن ها را غیرفعال کنند (مانند افرادی که به حرکت حساسیت دارند)، باید بتوانند این انیمیشن ها را خاموش کنند. View Transitions API با Media Query prefers-reduced-motion سازگار است. شما می توانید با استفاده از این Media Query، انیمیشن ها را برای این کاربران غیرفعال کنید.
   • مثال:

     @media (prefers-reduced-motion: reduce) {
       /* انیمیشن ها را غیرفعال کن */
       ::view-transition-old(*),
       ::view-transition-new(*) {
         animation: none;
         transition: none;
       }
     }
     

استفاده از view-transition-name یک گام بزرگ به سوی ایجاد وب سایت های مدرن، تعاملی و از نظر بصری جذاب است. با در نظر گرفتن پشتیبانی مرورگر و ملاحظات دسترسی پذیری، می توانید از این قابلیت قدرتمند به بهترین نحو بهره ببرید.

ویژگی view-transition-name در CSS، همراه با View Transitions API، پارادایم جدیدی را برای ایجاد انیمیشن های انتقال صفحه و بین نماها در وب معرفی کرده است. این قابلیت به طور چشمگیری فرآیند ایجاد انیمیشن های روان، معنایی و چشم نواز را ساده می کند و به توسعه دهندگان اجازه می دهد تا تجربیات کاربری بسیار غنی تری را خلق کنند.

 

با نام گذاری عناصر کلیدی، مرورگر می تواند به طور خودکار یا با کمک CSS سفارشی، انتقال های بصری جذابی را بین حالت های مختلف یک برنامه وب مدیریت کند. این امر نه تنها پیچیدگی کد را کاهش می دهد، بلکه به بهبود معیارهای مهمی مانند Core Web Vitals (از طریق کاهش CLS) و تجربه کلی کاربر کمک می کند.

اگرچه View Transitions API هنوز نسبتاً جدید است و پشتیبانی کامل آن در همه مرورگرها در حال گسترش است، اما استفاده از آن در پروژه های مدرن، به خصوص برنامه های تک صفحه ای، می تواند تفاوت قابل توجهی ایجاد کند. با در نظر گرفتن نکات مربوط به نام گذاری منحصر به فرد، استفاده از شبه عناصر ::view-transition-old() و ::view-transition-new() برای سفارشی سازی، و توجه به دسترسی پذیری (با prefers-reduced-motion)، می توانید از قدرت این ویژگی برای ساخت وب سایت های آینده نگر و تعاملی بهره مند شوید.