‏انیمیشن ورود و خروج المان‌ها با View Transitions

به گفتهٔ نویسنده، هدف این سری انیمیت‌کردن المان‌ها موقع ورود و خروج از دیده، مخصوصاً تو حالت‌های سخت: وقتی یه المان از display: none به نمایش درمیاد، یا برای اولین بار وارد DOM می‌شه، و از همه سخت‌تر وقتی داره از DOM خارج می‌شه. این‌ها همیشه قلمرو دشواری برای انیمیشن بودن، ولی حالا View Transitions این کارو راه می‌ندازه.

هستهٔ کار برای ترنزیشن‌های «هم‌صفحه» همین startViewTransition ه. هر تغییری که تو کال‌بکش به DOM بدی، مرورگر بین حالت قبل و بعد یه ترنزیشن می‌سازه:

addButton.addEventListener("click", () => {
  document.startViewTransition(() => {
    addItemToDOM();
  });
});

نکتهٔ جالب اینه که همون محو نرم (fade) رو بدون نوشتن حتی یه خط CSS می‌گیری؛ این رفتار پیش‌فرض و خودکار View Transition ه، حتی وقتی المان‌ها واقعاً دارن وارد و خارج DOM می‌شن. نویسنده پیشنهاد می‌ده برای مرورگرهایی که پشتیبانی نمی‌کنن یه مسیر جایگزین بذاری و از transition.finished برای پاک‌سازی بعد از انیمیشن استفاده کنی.

برای کنترل «ورود»، می‌تونی یه @keyframes مخصوص به المان‌های جدید بدی، یعنی سلکتور ::view-transition-new. این‌جوری هم استایل «در حال ورود» و هم استایل «باز» رو تعریف می‌کنی:

::view-transition-new(*) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-name: incoming-slide-fade;
}

ترفند «خروج» اینه که قبل از صدا زدن startViewTransition به المانِ در حال خروج یه view-transition-name بدی؛ اون‌وقت تو CSS با ::view-transition-old(...) می‌تونی یه @keyframes خروج مخصوص روش بذاری. نویسنده می‌گه همین که المان‌ها دارن واقعاً از DOM خارج می‌شن — چیزی که مدت‌ها انیمیت‌کردنش تقریباً غیرممکن بود — و حالا یه راه سرراست براش هست، برای خودش خیلی بزرگه.

نکات کلیدی:

• startViewTransition هستهٔ ترنزیشن‌های هم‌صفحه‌ست و به‌صورت پیش‌فرض یه محو نرم می‌ده
• کنترل ورود با ::view-transition-new و کیفریم اختصاصی انجام می‌شه
• برای خروج باید قبل از فراخوانی، به المان view-transition-name بدی تا با ::view-transition-old هدفش بگیری
• بهتره برای مرورگرهای بدون پشتیبانی fallback بذاری و پاک‌سازی رو به transition.finished بسپاری