View Transitions API — מעברי עמודים כמו אפליקציה

8.1 למה אתר מרגיש כמו "אתר" ואפליקציה כמו "אפליקציה"

יש טסט פשוט. פתחו את Instagram באייפון. פתחו את אינסטגרם בדפדפן ב-desktop (instagram.com). תחליקו בין תמונות, תיכנסו לפרופיל, תחזרו. שימו לב מה בדיוק מרגיש שונה. הפידים זהים. הצבעים זהים. האייקונים זהים. אבל משהו — משהו עמוק — עושה את ההבדל בין "זו אפליקציה" ל"זה אתר".

ההבדל הזה הוא מעברים. באפליקציה, כשאתם לוחצים על תמונת פרופיל, היא "גדלה" עד שהיא ממלאת את המסך. באתר, כשאתם לוחצים על קישור — המסך נהיה לבן לשבריר שנייה, ואז עמוד חדש "קופץ" במקום. זה hard page refresh, וזה הטל המרכזי שחושף אתר כאתר.

המעברים האלה — shared element transitions בלשון Material Design, hero animations בלשון iOS — היו עד 2023 בלעדיים לאפליקציות native. ב-web היית חייב לכתוב 200 שורות של JavaScript עם getBoundingClientRect(), requestAnimationFrame, ו-FLIP technique (First-Last-Invert-Play). זה היה מסובך, שביר, ולא-responsive. 90% מהאתרים פשוט ויתרו.

מה השתנה ב-2023-2026

ב-מרץ 2023, Chrome 111 הכניסו את View Transitions API — ה-native פתרון של הפלטפורמה. ב-ספטמבר 2024 הגיעה התמיכה ב-cross-document transitions (מעברים בין עמודים נפרדים, לא רק בתוך SPA). ב-2025-2026, Firefox ו-Safari מצטרפים. התוצאה: כל אתר, ב-3 שורות CSS, יכול להרגיש כמו אפליקציה.

זה לא מוגזם להגיד שזה אחד השינויים הכי גדולים בחוויית ה-web מאז responsive design. וכן — AI עדיין לא משתמש בזה כברירת-מחדל. זו בדיוק ההזדמנות שלכם.

למה זה משנה עסקית

• תפיסת ערך — מוצר שמרגיש "אפליקציה" מתומחר ב-20-40% יותר ממוצר שמרגיש "אתר". גולש תופס SaaS עם מעברים חלקים כיותר מקצועי מאחד בלי, בלי יחס לפיצ'רים.
• Retention — מעבר חלק מקטין את ה-"perceived loading time" ב-30-50%. הגולש לא רואה מסך לבן, אז הוא לא חושב "זה איטי".
• Memorability — אפקט morph של תמונת מוצר שעפה לעמוד מלא זכור יותר משינוי עמוד רגיל. זה הופך פעולה שגרתית ל-moment.
• Competitive edge — נכון לאפריל 2026, פחות מ-5% מאתרי B2B ישראליים משתמשים ב-View Transitions. אם אתם בתוך ה-5%, אתם נראים לפחות שנה קדימה.

8.2 View Transitions API — מה זה, ואיך הוא שונה מ-@keyframes

הדרך הכי פשוטה להבין את View Transitions היא להשוות אותו ל-@keyframes הקלאסי שאתם כבר מכירים מפרק 7:

הקסם מאחורי הקלעים

כשאתם מפעילים View Transition, הדפדפן עושה משהו מורכב מאחורי הקלעים:

1. צילום של ה-DOM הנוכחי (העמוד הישן) — מעין screenshot וירטואלי בזיכרון.
2. ביצוע השינוי — החלפת HTML, ניווט לעמוד חדש, או עדכון DOM.
3. צילום של ה-DOM החדש.
4. יצירת 7 pseudo-elements שמכילים את שני הצילומים (ישן + חדש).
5. הפעלת fade-out על הישן ו-fade-in על החדש, בברירת-מחדל — אפשר להחליף את זה ב-@keyframes משלכם.
6. הסרת ה-pseudo-elements כשהמעבר מסתיים.

זה הסיבה שמרגישים כמו אפליקציה — הדפדפן מטפל באנימציה ב-compositor thread, ב-60fps, גם אם ה-DOM השתנה לחלוטין בין שני המצבים.

שלושה סוגי מעברים — בראייה גבוהה

1. Cross-fade (ברירת-מחדל) — העמוד הישן דוהה לשקיפות, החדש מופיע. 3 שורות CSS, אפקט מיידי.
2. Morph / Shared Element — אלמנט ספציפי (תמונה, כותרת) "עף" ממיקום ישן למיקום חדש. דורש view-transition-name ייחודי על האלמנט בשני המצבים.
3. Slide — העמוד הישן מחליק החוצה, החדש נכנס מהצד. דורש @keyframes משלכם על ה-pseudo-elements.

נעבור על שלושתם במתכונים מלאים בסעיפים 8.6, 8.7, ו-8.8. אבל קודם — נבין את ה-building blocks.

8.3 document.startViewTransition() — נקודת הכניסה ב-JavaScript

ל-same-document transitions (SPA, React, Vue, Svelte) — זו השורה שמפעילה הכל:

document.startViewTransition(() => {
  // כאן אתם מעדכנים את ה-DOM.
  // הדפדפן יצלם "לפני", יריץ את הפונקציה, יצלם "אחרי", ויעביר ביניהם.
  updateTheDOM();
});

זהו. תנאי יחיד: הפונקציה שמועברת חייבת לעדכן את ה-DOM בצורה סינכרונית, או להחזיר Promise ש-resolve אחרי העדכון.

דוגמה מלאה — מיון רשימה עם fade

const sortBtn = document.querySelector('#sort-btn');
const list = document.querySelector('#product-list');

sortBtn.addEventListener('click', () => {
  // בדיקת תמיכה — חיוני!
  if (!document.startViewTransition) {
    sortList();  // fallback: מיון רגיל, בלי אנימציה
    return;
  }

  // הפעלת המעבר
  document.startViewTransition(() => sortList());
});

function sortList() {
  const items = [...list.children];
  items.sort((a, b) => +a.dataset.price - +b.dataset.price);
  items.forEach(item => list.appendChild(item));
}

התוצאה: כשלוחצים על "מיון לפי מחיר", הפריטים לא קופצים למיקומים החדשים — הם זוחלים בחלקות. 4 שורות של boilerplate (startViewTransition + בדיקת תמיכה) הוסיפו חוויית app.

תחזיר Promise אם העדכון async

document.startViewTransition(async () => {
  const newData = await fetch('/api/products').then(r => r.json());
  renderProducts(newData);
});

שימו לב: הדפדפן "יקפיא" את המצב הישן על המסך עד שה-Promise מסתיים. אם ה-fetch לוקח 3 שניות — הגולש רואה מסך קפוא 3 שניות. תמיד עטפו fetch-ים איטיים ב-Promise.race עם timeout של 200-300ms לכל היותר, או תשתמשו ב-skeleton screen מחוץ למעבר.

מה מחזיר הפונקציה

startViewTransition מחזיר אובייקט עם 3 Promises שימושיים:

const transition = document.startViewTransition(() => updateDOM());

transition.ready.then(() => {
  // ה-pseudo-elements נוצרו; אפשר להוסיף animations דינמית
});

transition.finished.then(() => {
  // המעבר הסתיים; זמן טוב לניקוי
});

transition.updateCallbackDone.then(() => {
  // ה-DOM update הסתיים (הפונקציה רצה), אבל האנימציה עדיין בתהליך
});

ב-95% מהמקרים לא תצטרכו את זה. אבל כשתרצו לסנכרן דברים (למשל להפעיל sound effect בדיוק בסוף המעבר) — transition.finished הוא החבר שלכם.

8.4 view-transition-name — איך "לסמן" אלמנט שמשתתף במעבר

ברירת-המחדל של View Transitions היא cross-fade גלובלי — כל העמוד דוהה, כל העמוד מופיע. זה נחמד, אבל לא מרשים. הקסם האמיתי מתחיל כשאלמנט ספציפי עובר בצורה שונה מהשאר — למשל תמונת מוצר שגדלה מ-thumbnail ל-full view, בזמן שכל השאר עושה cross-fade רגיל.

לשם כך צריך view-transition-name. זה CSS property שאומר לדפדפן "האלמנט הזה מקבל טיפול מיוחד — עקוב אחריו בנפרד".

ה-syntax הבסיסי

.product-card__image {
  view-transition-name: product-hero-image;
}

עכשיו, בכל מעבר, אם קיים אלמנט עם view-transition-name: product-hero-image ב-לפני וגם ב-אחרי — הדפדפן יתאים ביניהם וייצר morph animation.

הכלל הקריטי: ייחודיות

בכל רגע נתון, לכל view-transition-name חייב להיות בדיוק אלמנט אחד על העמוד. אם יש שניים — המעבר ייכשל בשקט, והאלמנטים יקפצו כמו בלי View Transitions. זה הטעות המס' 1 של מתחילים.

מתכון: תיוג כרטיס מוצר שלם כ-"morph group"

אתם רוצים שכשהגולש ילחץ על כרטיס מוצר ברשימה, התמונה, הכותרת, והמחיר יעופו בחלקות למיקומים החדשים בעמוד הפריט. הנה ה-CSS:

/* בעמוד הרשימה */
.product-card[data-id="42"] .product-image {
  view-transition-name: product-42-image;
}
.product-card[data-id="42"] .product-title {
  view-transition-name: product-42-title;
}
.product-card[data-id="42"] .product-price {
  view-transition-name: product-42-price;
}

/* בעמוד הפריט */
.product-detail__hero-image {
  view-transition-name: product-42-image;
}
.product-detail__title {
  view-transition-name: product-42-title;
}
.product-detail__price {
  view-transition-name: product-42-price;
}

שימו לב: אותם 3 שמות בשני העמודים, אבל על סלקטורים שונים. הדפדפן מתאים ביניהם ובונה אנימציה של morph עבור כל אחד. התוצאה: חוויה זהה ל-iOS App Store.

יצירת שם דינמית ב-React/Vue

בפועל, אתם לא תכתבו CSS ידני לכל מוצר. תעבירו את השם כ-inline style:

// React
<img
  src={product.image}
  style={{ viewTransitionName: `product-${product.id}-image` }}
/>

// Vue
<img
  :src="product.image"
  :style="{ viewTransitionName: `product-${product.id}-image` }"
/>

זה הדפוס הסטנדרטי: שם מבוסס ID. אם יש לכם 100 מוצרים בעמוד, יהיו 100 view-transition-name שונים — וזה בסדר גמור, כי רק אלה שמופיעים בשני העמודים יעברו morph.

8.5 ::view-transition pseudo-elements — 7 השכבות של המעבר

כש-View Transition מתחיל, הדפדפן בונה עץ של 7 pseudo-elements וירטואליים. הם לא נראים ב-DOM הרגיל, אבל אפשר לעצב אותם עם CSS. הכרה שלהם = שליטה מלאה במעבר.

דוגמה: שליטה ב-duration של ה-cross-fade הכללי

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

שורה אחת — ה-fade-out וה-fade-in עכשיו לוקחים 400ms (במקום 250ms ברירת-המחדל) עם easing של "ease-out expo" (קלאסי של Linear, Vercel, Framer).

דוגמה: מעבר custom על כרטיס hero

/* החלף את ה-fade הסטנדרטי ב-scale-fade לתמונת ה-hero */
::view-transition-old(hero-image) {
  animation: scale-out 0.3s ease-in forwards;
}

::view-transition-new(hero-image) {
  animation: scale-in 0.3s ease-out backwards;
}

@keyframes scale-out {
  to { opacity: 0; transform: scale(1.2); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.8); }
}

עכשיו תמונת ה-hero לא סתם דוהה — היא "מתקרבת ומתרחקת" תוך כדי fade. זה הדפוס של Apple.com וגם של Dribbble.

8.6 מתכון #1: Cross-fade — ברירת-מחדל ב-3 שורות

Cross-fade הוא המתכון הכי פשוט, והכי מומלץ כ-baseline. כמעט כל אתר יכול לקבל אותו בחינם — והוא כבר משנה 60% מהתחושה.

ל-MPA / Astro / static sites — שורה אחת

@view-transition {
  navigation: auto;
}

זהו. שימו את השורה הזו ב-CSS הגלובלי של האתר. כל ניווט בין עמודים יהיה cross-fade. עובד ב-Chrome 126+ ו-Edge 126+.

ל-SPA / React / Vue — wrapping של ניווט

// ב-App.jsx או ב-router wrapper
function navigate(url) {
  if (!document.startViewTransition) {
    window.location.href = url;  // fallback
    return;
  }
  document.startViewTransition(() => {
    // ה-router שלכם מעדכן את ה-DOM
    router.push(url);
  });
}

התאמה עדינה של ה-cross-fade

/* השתמשו בעיטור שקוף + duration נוח */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.25s;
  animation-timing-function: ease-out;
}

/* אל תרצו overlap? הריצו ברצף במקום במקביל */
::view-transition-image-pair(root) {
  isolation: auto; /* כברירת-מחדל יש blend; isolation: auto מחזיר לרגיל */
}

הוספת slide דק ב-RTL (מאוד ישראלי)

::view-transition-old(root) {
  animation: slide-out-rtl 0.3s ease-in forwards;
}
::view-transition-new(root) {
  animation: slide-in-rtl 0.3s ease-out backwards;
}

@keyframes slide-out-rtl {
  to { opacity: 0; transform: translateX(20px); }
}
@keyframes slide-in-rtl {
  from { opacity: 0; transform: translateX(-20px); }
}

שימו לב ל-translateX חיובי (20px ימינה) לעמוד הישן ו-שלילי (-20px משמאל) לעמוד החדש — בעברית RTL זו ההתקדמות הטבעית. אם אתם עובדים ב-LTR — החליפו את הסימנים.

8.7 מתכון #2: Morph / Shared Element — כרטיס שעובר לעמוד מלא

זה המתכון שבאמת עושה "וואו". הגולש לוחץ על כרטיס מוצר ברשימה — התמונה "גדלה" וזזה למיקום החדש בעמוד הפריט, הכותרת "זוחלת" למקום, המחיר "מתנגן" לגודל חדש. זו אפליקציה — לא אתר.

זה בדיוק הדפוס שהופך את iOS App Store ל-iOS App Store. ועכשיו הוא שורה של CSS.

המתכון המלא — כרטיס list → detail view

נניח שיש לכם רשימת מוצרים ב-/products ועמוד פרטי מוצר ב-/products/42. צעד 1 — תיוג הכרטיס:

<!-- /products -->
<a href="/products/42" class="product-card">
  <img
    src="/images/42.jpg"
    class="product-card__image"
    style="view-transition-name: product-42-image;"
  />
  <h3
    class="product-card__title"
    style="view-transition-name: product-42-title;"
  >
    אוזניות Sony WH-1000XM5
  </h3>
  <span
    class="product-card__price"
    style="view-transition-name: product-42-price;"
  >
    ₪1,499
  </span>
</a>

צעד 2 — תיוג אותם שמות בעמוד הפרטים:

<!-- /products/42 -->
<main class="product-detail">
  <img
    src="/images/42-large.jpg"
    class="product-detail__hero"
    style="view-transition-name: product-42-image;"
  />
  <h1
    class="product-detail__title"
    style="view-transition-name: product-42-title;"
  >
    אוזניות Sony WH-1000XM5 Noise Cancelling
  </h1>
  <div
    class="product-detail__price"
    style="view-transition-name: product-42-price;"
  >
    ₪1,499
  </div>
</main>

צעד 3 — הפעלת cross-document transitions (אם זה MPA):

@view-transition {
  navigation: auto;
}

/* Duration קצת יותר ארוך ל-morph, כדי שיראו את התנועה */
::view-transition-group(product-42-image),
::view-transition-group(product-42-title),
::view-transition-group(product-42-price) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

זהו. 3 תגים, 3 שמות, 6 שורות CSS. התוצאה: תמונת המוצר "עפה" ממיקום הכרטיס למיקום ה-hero, הכותרת "זוחלת" לגודל החדש, המחיר "מתנגן". חוויית App Store, ב-CSS בלבד.

הפקת שמות דינמית — ב-React

ברור שלא תכתבו ידנית view-transition-name: product-42-image. בפועל תגנרו את זה:

// ProductCard.jsx
export function ProductCard({ product }) {
  const nameBase = `product-${product.id}`;
  return (
    <Link href={`/products/${product.id}`}>
      <img
        src={product.image}
        style={{ viewTransitionName: `${nameBase}-image` }}
      />
      <h3 style={{ viewTransitionName: `${nameBase}-title` }}>
        {product.title}
      </h3>
      <span style={{ viewTransitionName: `${nameBase}-price` }}>
        ₪{product.price}
      </span>
    </Link>
  );
}

טיפ: morph גם על ניווט מערבי (back button)

כשהגולש לוחץ Back, הדפדפן גם מפעיל View Transition — אבל הפוך (מעמוד הפרטים חזרה לרשימה). אם השמות זהים בשני העמודים — ה-morph עובד בשני הכיוונים אוטומטית. זו המתנה הכי גדולה של ה-API.

8.8 מתכון #3: Slide — מעבר אופקי כמו wizard

Slide transition מתאים ל-wizard flows (רישום ב-3 שלבים), ל-carousel-like navigation, ול-onboarding screens. הוא משדר "רצף לינארי" — "עברנו לעמוד הבא בתהליך".

המתכון — ב-RTL (עברית)

/* כללי: Slide בכיוון "קדימה" — עמוד ישן יוצא משמאל, חדש נכנס מימין */
::view-transition-old(root) {
  animation: slide-out-ltr 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
::view-transition-new(root) {
  animation: slide-in-rtl 0.35s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

@keyframes slide-out-ltr {
  to { transform: translateX(-100%); opacity: 0.5; }
}
@keyframes slide-in-rtl {
  from { transform: translateX(100%); opacity: 0.5; }
}

Slide דו-כיווני — back button בכיוון הפוך

הבעיה: כשלוחצים Next, רוצים slide ימינה. כשלוחצים Back, רוצים slide שמאלה. אבל הדפדפן לא יודע את כיוון הניווט — הוא רק יודע "המעבר החל".

הפתרון: שימו טיימסטמפ או step number ב-URL או ב-sessionStorage. לפני ה-navigation, הוסיפו class ל-<html>:

// לפני ה-navigation
const direction = newStep > currentStep ? 'forward' : 'backward';
document.documentElement.dataset.navDirection = direction;

document.startViewTransition(() => {
  router.push(newUrl);
});

/* CSS: שני מצבים */
html[data-nav-direction="forward"] ::view-transition-old(root) {
  animation: slide-out-ltr 0.35s forwards;
}
html[data-nav-direction="forward"] ::view-transition-new(root) {
  animation: slide-in-rtl 0.35s backwards;
}

html[data-nav-direction="backward"] ::view-transition-old(root) {
  animation: slide-out-rtl 0.35s forwards;
}
html[data-nav-direction="backward"] ::view-transition-new(root) {
  animation: slide-in-ltr 0.35s backwards;
}

עכשיו ה-wizard שלכם מרגיש כמו app. Next מחליק קדימה, Back מחליק אחורה, והגולש יודע בדיוק "איפה הוא" בתהליך.

8.9 Same-document מול Cross-document — ההבדל הקריטי

זה ההבדל המושגי החשוב ביותר בפרק, ולצערנו גם זה שמבלבל הכי הרבה אנשים. בואו נעשה סדר.

איך יודעים באיזה אני?

שאלו את עצמכם: כשאני לוחץ קישור באתר שלי, האם הכתובת בכתובית משתנה אחרי שהרשת טוענת דבר חדש (MPA), או לפני, ואז JavaScript מעדכן את התוכן (SPA)?

• אם יש lightning bolt / loading spinner של הדפדפן בכרטיסייה בזמן ניווט — MPA (cross-document).
• אם הניווט מרגיש מיידי, בלי spinner של הדפדפן — SPA (same-document).

יתרונות וחסרונות של כל גישה

SPA (same-document):

• + שליטה מלאה — אתם קובעים מתי בדיוק ה-DOM משתנה
• + אפשר לבצע pre-load, prefetch, skeleton לפני ה-transition
• − דורש JavaScript — אם ה-JS נכשל, אין ניווט בכלל
• − דורש framework או router ידני

MPA (cross-document):

• + שורה אחת של CSS, בלי JavaScript בכלל
• + עובד עם HTML סטטי — Astro, 11ty, WordPress, hand-coded HTML
• + SEO-friendly כברירת-מחדל
• − אין שליטה על מה שקורה בזמן ה-fetch — הדפדפן מחליט
• − אם הדף הבא איטי (יותר מ-500ms) — הגולש רואה freeze

8.10 Cross-document ל-MPA — Astro, static sites, ו-@view-transition

Cross-document transitions הן ההפצצה של 2024-2026. אתר HTML סטטי של שנת 1999 יכול לקבל "תחושת אפליקציה" עם שורה אחת של CSS. אין צורך ב-framework, אין צורך ב-JavaScript, אין צורך ב-build step.

The simplest possible setup

יצרו שני קבצים:

<!-- /index.html -->
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <h1>עמוד ראשי</h1>
  <a href="/about.html">לאודות →</a>
</body>
</html>

<!-- /about.html -->
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <h1>אודות</h1>
  <a href="/index.html">← חזרה</a>
</body>
</html>

/* /styles.css */
@view-transition {
  navigation: auto;
}

פתחו את index.html ב-Chrome. לחצו "לאודות". המסך לא קפץ — הוא התחלף בחלקות. 3 קבצים, 0 JavaScript, חווית app.

דרישות הבסיס — מה חייב להיות

1. קובץ CSS גלובלי עם @view-transition { navigation: auto }. חייב להיות טעון בשני העמודים.
2. ניווט ב-<a> tag רגיל — לא ב-window.location, לא ב-form.submit(), לא ב-fetch. הדפדפן מפעיל את המעבר רק על ניווט סמנטי.
3. same-origin navigation — מעבר לדומיין אחר לא יפעיל View Transition (זה מגבלת אבטחה).
4. HTML דומה מספיק — אם מבנה ה-DOM שונה דרמטית, ה-cross-fade עדיין יעבוד, אבל morph לא.

Opt-out של מעברים ספציפיים

@view-transition {
  navigation: auto;
}

/* אל תפעיל מעברים אם ה-URL מכיל '/admin/' */
@media (prefers-reduced-motion: no-preference) {
  /* ברוב המקרים לא צריך - אבל אפשר לבטל דרך JS: */
}

לבטל מעבר ספציפי דרך JS:

document.addEventListener('pageswap', (event) => {
  if (event.viewTransition && shouldSkip(event.activation.to.url)) {
    event.viewTransition.skipTransition();
  }
});

Astro — מובנה לחלוטין

Astro 4+ מספק View Transitions integration מובנה:

---
// src/layouts/Layout.astro
import { ViewTransitions } from 'astro:transitions';
---

<html lang="he" dir="rtl">
  <head>
    <ViewTransitions />
  </head>
  <body>
    <slot />
  </body>
</html>

שורה אחת ב-<head>, ו-Astro דואג לכל השאר: cross-document transitions, named transitions, polyfill לדפדפנים ישנים, ו-persistent state בין עמודים. זה אחד הפיצ'רים שעושים Astro אטרקטיבי ב-2026.

8.11 Frameworks — Astro, Next.js App Router, React Router v7

האמת: רוב האתרים המקצועיים לא נכתבים ב-vanilla HTML. בואו נראה איך View Transitions משתלב בכל framework מרכזי באפריל 2026.

Astro 4.5+

הכי פשוט. מובנה, ללא setup נוסף:

---
import { ViewTransitions } from 'astro:transitions';
---
<html><head><ViewTransitions /></head>...</html>

אפשר גם להוסיף transition:name="unique-name" directive על כל אלמנט, ו-Astro ממיר אוטומטית ל-view-transition-name עם polyfill לדפדפנים שעוד אין להם תמיכה native.

Next.js App Router (15+)

Next.js 15 הכניסו unstable_ViewTransition component (צפוי להיות stable ב-Next 16):

// app/layout.tsx
import { unstable_ViewTransition as ViewTransition } from 'react';

export default function Layout({ children }) {
  return (
    <html lang="he" dir="rtl">
      <body>
        <ViewTransition>
          {children}
        </ViewTransition>
      </body>
    </html>
  );
}

לתיוג אלמנטים ספציפיים:

<ViewTransition name={`product-${product.id}-image`}>
  <img src={product.image} />
</ViewTransition>

שימו לב ש-Next.js מפעיל את זה על route transitions אוטומטית — אין צורך לעטוף router.push ידנית.

React Router v7

React Router v7 (יצא 2024) כולל ViewTransition component מובנה:

import { Link } from 'react-router';

<Link to="/products/42" viewTransition>
  מוצר 42
</Link>

ה-viewTransition prop על Link עוטף אוטומטית את ה-navigation ב-document.startViewTransition. אין צורך ביותר.

SvelteKit

SvelteKit עדיין לא מציע API ייעודי (נכון לאפריל 2026), אבל שילוב ידני פשוט בקובץ +layout.svelte:

<script>
  import { onNavigate } from '$app/navigation';

  onNavigate((navigation) => {
    if (!document.startViewTransition) return;

    return new Promise((resolve) => {
      document.startViewTransition(async () => {
        resolve();
        await navigation.complete;
      });
    });
  });
</script>

טבלת השוואה

8.12 Browser support — אפריל 2026, ו-fallback אלגנטי

מצב התמיכה עבר שינויים דרמטיים בין 2023 ל-2026. הנה ה-snapshot נכון לאפריל 2026 (freshness-sensitive — בדקו את caniuse.com לפני deployment):

שימו לב: נתוני התמיכה משתנים במהירות. תמיד בדקו ב-caniuse.com/view-transitions לפני שאתם שולחים לפרודקשן.

Progressive enhancement — הפילוסופיה

View Transitions תוכנן מראש כ-progressive enhancement. זה אומר: הוא לא שובר שום דבר. אם הדפדפן לא תומך — הניווט פשוט קורה בלי אנימציה. אין לכם מה לדאוג ל-Firefox משנת 2020 שנכנס לאתר שלכם — הוא יראה את האתר כרגיל, בלי הבונוס.

Feature detection

ל-same-document:

if (document.startViewTransition) {
  // יש תמיכה
  document.startViewTransition(() => updateDOM());
} else {
  // fallback
  updateDOM();
}

ל-cross-document אין feature detection דרך JS — אבל CSS יודע להתעלם ממה שהוא לא מכיר:

/* Firefox ישן פשוט יתעלם. אין שבירה. */
@view-transition {
  navigation: auto;
}

Fallback Checklist

1. האתר שלכם חייב לעבוד 100% בלי View Transitions. בדקו ב-Firefox או ב-Chrome incognito עם disable JavaScript.
2. הוסיפו @supports אם אתם מחילים רק styles מיוחדים: @supports (view-transition-name: a) { ... }.
3. אל תשלבו state קריטי ב-startViewTransition. העדכון ל-DOM חייב לעבוד גם בלי ה-wrapping.
4. בדקו על מכשיר אמיתי (לא רק DevTools emulation) — iOS Safari 17 ו-Firefox Android עלולים להתנהג אחרת.
5. הריצו Lighthouse — ה-accessibility ו-performance score לא אמורים לרדת.
6. Core Web Vitals: ודאו ש-LCP לא נפגע. מעברים כבדים (morph של תמונות 5MB) יכולים לדחוף LCP מעל 2.5 שניות.

8.13 Performance & UX rules — 1-3 אלמנטים, 300ms, reduced-motion

View Transitions הוא עוצמתי, ולכן קל לנצל אותו לרעה. הכלל הזהב: מעבר חלק מרגיש טבעי; מעבר מתוחכם מרגיש מוגזם. הנה 5 כללים ש-99% מהמפתחים מפרים — ואתם לא תפרו.

כלל 1: 1-3 אלמנטים מסומנים, לא יותר

אם אתם מתייגים 20 אלמנטים עם view-transition-name, המעבר יהפוך לכאוס של תנועה. העין של הגולש לא יכולה לעקוב אחרי 20 דברים שזזים במקביל. המלצה: 1 אלמנט ראשי (תמונת hero), 1-2 משניים (כותרת, מחיר) — וזהו. כל השאר — cross-fade כברירת-מחדל.

כלל 2: duration 200-400ms, לא יותר

מעבר של 500ms+ מרגיש "איטי" לגולש. מעבר של פחות מ-150ms מרגיש "מהיר מדי" — הגולש לא מרגיש את האנימציה. ה-sweet spot: 250ms ל-cross-fade, 300-400ms ל-morph.

כלל 3: prefers-reduced-motion — חובה, לא אופציונלי

יש משתמשים שהתנועה גורמת להם ל-motion sickness. יש משתמשים שיצרו setting "reduced motion" ב-OS. לכבד אותם זה לא bonus — זו דרישת נגישות:

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

זהו. 6 שורות CSS. משתמשים עם reduced-motion יקבלו ניווט מיידי בלי אנימציה — בדיוק כמו שהם רוצים.

כלל 4: אל תחסמו את ה-UI

אם המעבר לוקח 400ms, הגולש לא יכול לבטל את הניווט או ללחוץ Back במהלכו. זה OK ל-300ms, מתחיל להיות בעייתי ב-500ms+. אל תעשו מעברים ארוכים על interactions שהגולש עושה הרבה (חיפוש, פילטר, מיון).

כלל 5: test על mobile אמיתי

Safari iOS ו-Chrome Android יכולים להתנהג שונה מ-desktop. morph של תמונה גדולה על iPhone 12 עלול לקפוץ. בדקו תמיד על 2-3 מכשירים פיזיים לפני שליחה ל-production.

8.14 איך לבקש מ-AI View Transitions — 3 פרומפטים מדויקים

אם תבקשו מ-AI "add smooth page transitions", תקבלו cross-fade גנרי — או גרוע מזה, פתרון של 200 שורות JavaScript עם Framer Motion. הסוד הוא להיות ספציפיים. הנה 3 templates שעובדים:

Prompt #1 — Cross-fade עם fallback

Add a cross-fade View Transitions API to this site.

Requirements:
- Use @view-transition { navigation: auto } for cross-document support (MPA/Astro)
- Set transition duration to 250ms with ease-out timing
- Include a @media (prefers-reduced-motion: reduce) fallback that disables
  all view-transition animations
- Do NOT add any CSS transitions on html or body elements
- Do NOT add JavaScript — CSS-only solution
- Ensure the site still works perfectly in browsers without support (Firefox, Safari 17)

Show me only the CSS I need to add, and the file where to put it.

Prompt #2 — Morph transition בין כרטיס לעמוד פרטי

Add a morph View Transition between the product list page and the product
detail page for product id={productId}.

Elements to morph (use unique view-transition-name for each):
- Product image: view-transition-name: product-{id}-image
- Product title: view-transition-name: product-{id}-title
- Product price: view-transition-name: product-{id}-price

Requirements:
- Add the view-transition-name via inline style (for React/Vue), so it can be
  generated from the product id dynamically
- Match element names in BOTH the list card AND the detail page
- Use cubic-bezier(0.16, 1, 0.3, 1) for the group animation (ease-out expo)
- Set animation-duration to 400ms for morph elements, 250ms for everything else
- Include prefers-reduced-motion fallback that disables morph but keeps the navigation working
- Do NOT add view-transition-name on a shared class (.card) — it must be per-item

Frameworks: I'm using {React|Vue|Astro|vanilla}. Use appropriate syntax.

Prompt #3 — Slide transition בסגנון wizard (RTL)

Add a slide View Transition for a 3-step wizard in Hebrew (RTL direction).

Behavior:
- Next button: old page slides OUT to the left, new page slides IN from the right
- Back button: old page slides OUT to the right, new page slides IN from the left
- Track navigation direction in a data-nav-direction attribute on <html> element
- Duration: 350ms with cubic-bezier(0.4, 0, 0.2, 1)
- Include prefers-reduced-motion fallback
- Use translateX and opacity 0.5 at the midpoint for a polished effect

Framework: {Next.js App Router | Astro | vanilla JS}

Return: (1) the CSS for both directions, (2) the JS that sets the
data-nav-direction before calling startViewTransition.

מה הופך את הפרומפטים האלה לעובדים

• מילים טכניות מדויקות — "view-transition-name", "cubic-bezier", "prefers-reduced-motion". AI מזהה את המונחים ומייצר קוד מדויק.
• אילוצים שליליים — "Do NOT add any JavaScript", "Do NOT add view-transition-name on a shared class". בלי זה, ה-AI ימציא פתרונות מוגזמים.
• duration מדויק — לא "smooth" אלא "250ms with ease-out". AI לא מנחש.
• Framework מצוין — AI יודע ש-Astro זה לא Next.js זה לא React SPA. זה משנה את ה-output.
• Fallback explicit — כולל prefers-reduced-motion ו-browser support. AI לא יזכור בעצמו.

8.15 Gotchas — 5 בעיות שכולם נתקלים בהן

Gotcha 1: display: none שובר morph

אלמנט עם display: none לא מצולם בזמן View Transition. אם התמונה שלכם מוסתרת ב-display: none בעמוד אחד ו-display: block בשני, ה-morph ייכשל.

הפתרון: השתמשו ב-visibility: hidden + opacity: 0, או ב-conditional rendering ב-React/Vue שמסיר את האלמנט לגמרי (לא רק מסתיר).

Gotcha 2: שם view-transition-name זהה בשני אלמנטים בו-זמנית

כבר דיברנו על זה — הנה עוד scenario. יש לכם sticky header עם לוגו שמקבל view-transition-name: logo. הלוגו מופיע גם ב-footer. בזמן מעבר — שני אלמנטים עם אותו שם. View Transition נשבר.

הפתרון: שמות ייחודיים — logo-header, logo-footer. לעולם לא לחזור על שם.

Gotcha 3: Mobile Safari מגמגם על morph של תמונות גדולות

iPhone 12 / 13 עם תמונה של 4MB תגרום ל-View Transition לגמגם ב-5-10 frames. הסיבה: הצילום עצמו לוקח זמן על mobile.

הפתרון: (א) תמונות מאופטמות — WebP/AVIF תחת 200KB. (ב) image-rendering: optimizeSpeed על תמונות במעבר. (ג) test על מכשיר אמיתי, לא רק DevTools.

Gotcha 4: מעברים לא עובדים עם window.location.href

אם ב-JS שלכם אתם משתמשים ב-window.location.href = '/page2' לניווט, Cross-document View Transitions לא יפעלו. הדפדפן מפעיל אותם רק על ניווט סמנטי (<a> tag click, form submit, history.back).

הפתרון: השתמשו ב-<a href="..."> במקום window.location.href. אם חייבים JS, עטפו ב-document.startViewTransition ידנית.

Gotcha 5: iframe-ים לא תומכים

אם ה-site שלכם משובץ ב-iframe (widget, chatbot), View Transitions בתוך ה-iframe עלולים לא לעבוד עקב הגבלות cross-origin.

הפתרון: חיו עם זה. iframe הוא sandbox, ומעברים בתוכו הם edge-case. אם חיוני — scroll ב-host document במקום ניווט ב-iframe.