{"id":"l-css-4-2","courseId":"css-mastery","lang":"ar","kind":"lesson","summary":"حرّك الانتقال بين حالتين للصفحة نفسها باستخدام document.startViewTransition()، وأعطِ العناصر أسماء لتتحوّل بسلاسة إلى مواضعها الجديدة، وخصّص الحركة أو عطّلها في CSS.","html":"

حين يفعّل زائر Waypoint خيار «Hide sold-out»، تختفي ثلاث بطاقات وتقفز البقية إلى الأعلى لتملأ الفراغات. التغيير فوري وصحيح، لكنه مربك: كانت عينك على البطاقة الرابعة، والآن يقف شيء آخر مكانها. حركة سلسة من التخطيط القديم إلى الجديد كانت ستخبر العين إلى أين ذهبت الأشياء.

\n

تحريك تغييرات التخطيط كان يعني قياس كل عنصر قبل التغيير وبعده وتشغيل حركات FLIP في JavaScript. أما View Transition API فتقوم بالقياس نيابةً عنك.

\n

التقاط، تحديث، تحريك

\n
filters.js
const button = document.querySelector('#hide-full');\n\nfunction applyFilter() {\n  const hide = button.getAttribute('aria-pressed') !== 'true';\n  button.setAttribute('aria-pressed', String(hide));\n  for (const card of document.querySelectorAll('.session-card.is-full')) {\n    card.hidden = hide;\n  }\n}\n\nbutton.addEventListener('click', () => {\n  if (!document.startViewTransition) {\n    applyFilter();          // older browsers: just update\n    return;\n  }\n  document.startViewTransition(() => applyFilter());\n});
\n

تؤدّي startViewTransition() أربعة أشياء بالترتيب:

\n
    \n
  1. تلتقط صورة (snapshot) للصفحة الحالية.
    2. \n
  2. تستدعي دالة التحديث لديك، التي تغيّر الـ DOM كيفما شاءت.
    3. \n
  3. تلتقط الحالة الجديدة.
    4. \n
  4. تبني شجرة من الـ pseudo-elements تعرض الصورتين القديمة والجديدة، وتحرّك الانتقال بينهما.
    5. \n
\n
\n أربع خطوات في صف تصل بينها أسهم: التقاط الصورة القديمة، تشغيل callback التحديث، التقاط الصورة الجديدة، تحريك شجرة الـ pseudo-elements من القديم إلى الجديد.\n \n 1. التقاط\n الحالة القديمة\n \n 2. تحديث\n applyFilter()\n \n 3. التقاط\n الحالة الجديدة\n \n 4. تحريك\n ::view-transition\n \n \n \n الـ DOM الحقيقي في حالته الجديدة أصلًا أثناء تشغيل الخطوة 4.\n
يلتقط الـ view transition الحالة القديمة، ويشغّل التحديث، ويلتقط الحالة الجديدة، ثم يحرّك الانتقال
\n

الحركة الافتراضية تلاشٍ متقاطع للصفحة كلها. إنها خفيفة، وأفضل من القفزة بالفعل. تحديث الـ DOM نفسه حقيقي وفوري؛ الـ صورة وحدها هي التي تتحرّك، وأثناء تشغيلها تكون الصفحة تحتها في حالتها الجديدة أصلًا. وإن رمى التحديث خطأً أو تُخطّي الانتقال، يظل تغيير الـ DOM يحدث.

\n

سمِّ العناصر لتتحرّك

\n

لتجعل كل بطاقة تنزلق إلى موضعها الجديد، أعطها view-transition-name. كل عنصر مسمّى يحصل على زوج صور خاص به، ويحرّك المتصفّح موضعه وحجمه من القديم إلى الجديد:

\n
CSS
.session-card {\n  view-transition-name: var(--vt-name);\n}
\n
JavaScript
// Give every card a unique name once, when the list renders\nfor (const card of document.querySelectorAll('.session-card')) {\n  card.style.setProperty('--vt-name', `card-${card.id}`);\n}
\n

يجب أن تكون الأسماء فريدة بين العناصر المرسومة لحظة الالتقاط. البطاقات التي تختفي تتلاشى (فهي موجودة في الصورة القديمة وحدها)، والبطاقات الباقية تنزلق إلى الأعلى لتملأ الفراغات. وعينك تتبعها.

\n\n

تنسيق الحركة

\n

تعيش الحركة في شجرة من الـ pseudo-elements: ::view-transition في القمة، و::view-transition-group(name) لكل عنصر مسمّى (إضافةً إلى root لبقية الصفحة)، وداخل كلٍّ منها ::view-transition-old(name) و::view-transition-new(name). وتُحرَّك بحركات CSS عادية، فتتحكّم فيها بـ CSS عادية:

\n
CSS
::view-transition-group(*) {\n  animation-duration: 250ms;\n  animation-timing-function: ease-out;\n}\n\n/* Keep the header still while the list moves */\n.site-header { view-transition-name: header; }\n::view-transition-group(header) { animation: none; }
\n

الرمز * يطابق كل المجموعات. ولتقليل الحركة، أزل الحركات ليكون التغيير فوريًا:

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

لا توجد !important هنا لتهزم حركات المتصفّح الافتراضية؛ فقواعدك العادية تتغلّب عليها أصلًا، كما رأيت في الدرس الأول. إنها موجودة ليتغلّب تفضيل المستخدم أيضًا على أيّ حركة أدقّ كتبتها أنت أو مكتبة ما لمجموعة مسمّاة بعينها، مثل ::view-transition-group(header).

\n

وتستطيع أيضًا استهداف اتجاه واحد من التغيير. الصورة القديمة لبطاقة تختفي ليس لها إلا ::view-transition-old(card-s2)، دون نظير جديد، لذا فإن قاعدة مثل ::view-transition-old(*) { animation-duration: 150ms; } تجعل البطاقات المغادرة تتلاشى أسرع قليلًا من حركة البطاقات الباقية. وفروق صغيرة كهذه تجعل القائمة تبدو منظّمة لا مخلوطة.

\n

انتظار الانتقال

\n

تُرجع startViewTransition() كائن ViewTransition فيه ثلاثة promises. updateCallbackDone يُحسم حين يكتمل تحديثك للـ DOM، وready حين توشك الحركة على البدء، وfinished حين تنتهي وتزول الـ pseudo-elements. استخدم finished لنقل الـ focus أو إعلان نتيجة بعد أن تستقرّ الحركة، مثل إرسال الـ focus إلى أول بطاقة باقية لمستخدمي لوحة المفاتيح. لكن لا تجعل أيّ شيء جوهري ينتظر الحركة: ففي متصفّح بلا هذه الـ API لا يوجد كائن انتقال أصلًا.

\n\n

دورك الآن

\n

زر الفلتر في التمرين يخفي الجلسات الممتلئة دون حركة. أعطِ كل بطاقة اسمًا فريدًا، وغلّف التحديث في view transition مع بديل احتياطي، واضبط مدة المجموعات على 250ms، وأوقف الحركة لمن يفضّلون تقليلها. تراقب الفحوصات startViewTransition بـ spy وتحذفها أيضًا لتتأكّد من أن بديلك الاحتياطي يعمل. وبعدها ستربط تقدّم الحركة بالتمرير بدل الزمن.

\n","toc":[{"id":"sec-1","text":"التقاط، تحديث، تحريك","level":2},{"id":"sec-2","text":"سمِّ العناصر لتتحرّك","level":2},{"id":"sec-3","text":"تنسيق الحركة","level":2},{"id":"sec-4","text":"انتظار الانتقال","level":2},{"id":"sec-5","text":"دورك الآن","level":2}],"takeaways":["document.startViewTransition(update) تلتقط صورة للصفحة، وتشغّل تحديثك للـ DOM، وتلتقط صورة ثانية، ثم تحرّك الانتقال بينهما بتلاشٍ متقاطع (crossfade) افتراضيًا.","العنصر الذي له view-transition-name فريد يحصل على زوج صور خاص به، فيتحرّك ويتغيّر حجمه بسلاسة إلى موضعه الجديد بدل أن يتلاشى.","الحركة مبنية من pseudo-elements مثل ::view-transition-group(name)، تنسّقها بحركات CSS عادية.","افحص دائمًا وجود startViewTransition وشغّل التحديث مباشرةً حين تكون غائبة، وأزل الحركة للمستخدمين الذين يفضّلون تقليل الحركة."],"further":[{"title":"View Transition API (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API"},{"title":"Document: startViewTransition() method (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition"},{"title":"Same-document view transitions have become Baseline Newly available (web.dev)","url":"https://web.dev/blog/same-document-view-transitions-are-now-baseline-newly-available"}],"quiz":[{"q":"

استدعيت document.startViewTransition(() => applyFilter()) دون أيّ CSS على الإطلاق. ماذا يرى المستخدم؟

","options":[{"text":"لا شيء؛ الـ view transitions تحتاج إلى view-transition-name قبل أن تتحرّك.","why":"دون أسماء تُلتقط الصفحة كلها على أنها root وتتحرّك رغم ذلك."},{"text":"يُطبَّق الفلتر فورًا، لأن مدة الحركة الافتراضية صفر.","why":"الافتراضي تلاشٍ متقاطع قصير، لا تغيّر فوري."},{"text":"تلاشيًا متقاطعًا سريعًا للصفحة كلها من الحالة القديمة إلى الجديدة.","why":"صحيح. زوج صور الـ root يتلاشى تقاطعيًا افتراضيًا؛ والأسماء تضيف حركة لكل عنصر فوق ذلك."}],"answer":2},{"q":"

لبطاقتين في الصفحة view-transition-name: card كلتيهما. ماذا يحدث حين تبدأ انتقالًا؟

","options":[{"text":"يُتخطّى الانتقال، لأن الأسماء يجب أن تكون فريدة بين العناصر المرسومة.","why":"صحيح. الأسماء المكرّرة تجعل المتصفّح يُلغي الحركة؛ لكن تحديث الـ DOM يظل يعمل، فتتغيّر الصفحة فورًا فحسب."},{"text":"تتحرّك البطاقتان معًا كمجموعة واحدة.","why":"للمجموعة صورة قديمة واحدة وصورة جديدة واحدة بالضبط؛ ولا يستطيع المتصفّح دمج عنصرين في واحد."},{"text":"تتحرّك البطاقة الأولى في الـ DOM وحدها.","why":"المتصفّح لا يختار فائزًا؛ التكرار يُبطل الانتقال كله."},{"text":"تحصل البطاقة الثانية على اسم مولَّد تلقائيًا.","why":"مع اسم صريح مكرّر لا يُولَّد شيء؛ ويُتخطّى الانتقال."}],"answer":0},{"q":"

كيف تجعل كل view transition في الصفحة تستغرق 250ms؟

","options":[{"text":"document.startViewTransition({ duration: 250 })","why":"الدالة تأخذ callback للتحديث (أو كائن خيارات فيه update وtypes)، لا مدة."},{"text":"::view-transition-group(*) { animation-duration: 250ms; }","why":"صحيح. المجموعات تشغّل حركات CSS، فتتحكّم خصائص الحركة العادية في توقيتها."},{"text":"view-transition-duration: 250ms على :root","why":"لا توجد خاصية كهذه؛ التوقيت يأتي من الحركات المطبّقة على الـ pseudo-elements."}],"answer":1},{"q":"

أيّ عبارة عن الدعم دقيقة في 2026؟

","options":[{"text":"الـ view transitions داخل المستند نفسه وعبر المستندات كلتاهما تعملان في كل متصفّح رئيسي.","why":"الـ view transitions عبر المستندات للتطبيقات متعدّدة الصفحات غير متاحة في Firefox بعد، لذا فهي ليست ضمن Baseline."},{"text":"الـ view transitions لا تعمل إلا في متصفّحات Chromium.","why":"Safari وFirefox كلاهما يدعمان الآن الـ view transitions داخل المستند نفسه."},{"text":"الـ view transitions تحتاج إلى router من إطار عمل لتعمل.","why":"إنها API في المتصفّح؛ وأيّ تحديث للـ DOM داخل الـ callback يعمل، بإطار عمل أو دونه."},{"text":"الـ view transitions داخل المستند نفسه ضمن Baseline منذ أكتوبر 2025؛ أما عبر المستندات فليست ضمن Baseline بعد.","why":"صحيح. أكمل Firefox 144 دعم الانتقالات داخل المستند نفسه؛ أما انتقالات MPA (عبر المستندات) فما زالت تفتقر إلى دعم Firefox."}],"answer":3}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"\n
\n
Shipping View Transitions
\n
Grid Layout Workshop · Sold out
\n
Color Spaces for Humans
\n
Container Queries Lab · Sold out
\n
The Cost of a Frame
\n
","css":".schedule { display: grid; gap: 8px; margin-top: 12px; }\n.session-card {\n padding: 10px 14px;\n border: 1px solid #e5e7eb;\n border-radius: 10px;\n background: white;\n}\n.session-card[hidden] { display: none; }\n","js":"const button = document.querySelector('#hide-full');\n\nfunction applyFilter() {\n const hide = button.getAttribute('aria-pressed') !== 'true';\n button.setAttribute('aria-pressed', String(hide));\n for (const card of document.querySelectorAll('.session-card.is-full')) {\n card.hidden = hide;\n }\n}\n\nbutton.addEventListener('click', () => {\n applyFilter();\n});\n"},"solution":{"html":"\n
\n
Shipping View Transitions
\n
Grid Layout Workshop · Sold out
\n
Color Spaces for Humans
\n
Container Queries Lab · Sold out
\n
The Cost of a Frame
\n
","css":".schedule { display: grid; gap: 8px; margin-top: 12px; }\n.session-card {\n padding: 10px 14px;\n border: 1px solid #e5e7eb;\n border-radius: 10px;\n background: white;\n}\n.session-card[hidden] { display: none; }\n.session-card {\n view-transition-name: var(--vt-name);\n}\n\n::view-transition-group(*) {\n animation-duration: 250ms;\n}\n\n@media (prefers-reduced-motion: reduce) {\n ::view-transition-group(*),\n ::view-transition-old(*),\n ::view-transition-new(*) {\n animation: none !important;\n }\n}\n","js":"const button = document.querySelector('#hide-full');\n\n// A unique view-transition-name per card\nfor (const card of document.querySelectorAll('.session-card')) {\n card.style.setProperty('--vt-name', `card-${card.id}`);\n}\n\nfunction applyFilter() {\n const hide = button.getAttribute('aria-pressed') !== 'true';\n button.setAttribute('aria-pressed', String(hide));\n for (const card of document.querySelectorAll('.session-card.is-full')) {\n card.hidden = hide;\n }\n}\n\nbutton.addEventListener('click', () => {\n if (!document.startViewTransition) {\n applyFilter();\n return;\n }\n document.startViewTransition(() => applyFilter());\n});\n"},"checks":[{"id":"unique-names","test":"const names = $$('.session-card').map((c) => style(c, 'view-transition-name')); return names.every((n) => n && n !== 'none' && n !== 'auto') && new Set(names).size === names.length;"},{"id":"uses-view-transition","test":"const waitFor = async (fn) => { for (let i = 0; i < 60; i++) { if (fn()) return true; await tick(25); } return fn(); }; if (!document.startViewTransition) return false; const orig = document.startViewTransition; let called = false; document.startViewTransition = function (...args) { called = true; return orig.apply(document, args); }; try { await click('#hide-full'); await waitFor(() => $('#s2').hidden); } finally { document.startViewTransition = orig; } return called;"},{"id":"filter-works","test":"const waitFor = async (fn) => { for (let i = 0; i < 60; i++) { if (fn()) return true; await tick(25); } return fn(); }; return (await waitFor(() => $('#s2').hidden && $('#s4').hidden)) && !$('#s1').hidden && $('#hide-full').getAttribute('aria-pressed') === 'true';"},{"id":"fallback-works","test":"const waitFor = async (fn) => { for (let i = 0; i < 60; i++) { if (fn()) return true; await tick(25); } return fn(); }; const orig = document.startViewTransition; document.startViewTransition = undefined; let ok = false; try { await click('#hide-full'); ok = await waitFor(() => !$('#s2').hidden); } catch (e) { ok = false; } finally { document.startViewTransition = orig; } return ok;"},{"id":"group-duration","test":"const all = []; const walk = (rules, media) => { for (const r of rules) { all.push({ r, media }); if (r.cssRules) walk(r.cssRules, media || (r instanceof CSSMediaRule && r.conditionText.includes('prefers-reduced-motion'))); } }; for (const s of document.styleSheets) walk(s.cssRules, false); return all.some(({ r }) => r.selectorText && r.selectorText.includes('::view-transition-group') && (parseFloat(r.style.animationDuration) === 250 || parseFloat(r.style.animationDuration) === 0.25));"},{"id":"reduced-motion","test":"const all = []; const walk = (rules, media) => { for (const r of rules) { all.push({ r, media }); if (r.cssRules) walk(r.cssRules, media || (r instanceof CSSMediaRule && r.conditionText.includes('prefers-reduced-motion'))); } }; for (const s of document.styleSheets) walk(s.cssRules, false); return all.some(({ r, media }) => media && r.selectorText && r.selectorText.includes('::view-transition') && (r.style.animation || r.style.animationName));"}],"title":"حرّك الفلتر بـ view transition","prompt":"

النقر على Hide sold-out يخفي بطاقتين فورًا. اجعل التغيير متحرّكًا:

\n
    \n
  1. أعطِ كل .session-card قيمة view-transition-name فريدة (في CSS أو JS أو كليهما).
    2. \n
  2. شغّل تحديث الفلتر داخل document.startViewTransition()، وارجع إلى تحديث عادي حين لا تكون الدالة موجودة.
    3. \n
  3. اجعل كل حركة ::view-transition-group تستغرق 250ms.
    4. \n
  4. أوقف حركات الـ view transition للمستخدمين الذين يفضّلون تقليل الحركة.
    5. \n
\n

تراقب الفحوصات document.startViewTransition بـ spy وتحذفها أيضًا لتختبر بديلك الاحتياطي.

\n","hints":["قاعدة CSS واحدة تستطيع قراءة custom property خاصة بكل بطاقة: view-transition-name: var(--vt-name);. اضبط --vt-name لكل بطاقة من الـ id الخاص بها في JS.","في معالج النقر: if (!document.startViewTransition) { applyFilter(); return; } ثم document.startViewTransition(() => applyFilter());.","::view-transition-group(*) { animation-duration: 250ms; }، وداخل @media (prefers-reduced-motion: reduce) اضبط animation: none !important على الـ pseudo-elements الخاصة بالمجموعة والقديم والجديد."],"explanation":"

لكل بطاقة الآن اسم فريد (card-s1 وcard-s2…)، فيطابق المتصفّح صورتيها القديمة والجديدة، ويُزلق البطاقات الباقية إلى الفراغات بينما تتلاشى المخفية. والاسم المشترك كان سيجعل المتصفّح يتخطّى الانتقال. وتغليف applyFilter() في startViewTransition() يعطي المتصفّح حالتي ما قبل وما بعد؛ وفحص الميزة يُبقي الزر عاملًا في المتصفّحات التي لا تملك الـ API. وحركات المجموعات حركات CSS عادية، فتضبط animation-duration توقيتها، وanimation: none داخل استعلام تقليل الحركة تحوّلها إلى تغيّر فوري.

\n","checkLabels":{"unique-names":"لكل بطاقة view-transition-name فريد","uses-view-transition":"النقر يشغّل التحديث داخل startViewTransition()","filter-works":"تُخفى البطاقات الممتلئة وتتحدّث حالة الزر","fallback-works":"الزر يظل يعمل دون View Transition API","group-duration":"مجموعات الـ view transition تستغرق 250ms","reduced-motion":"تُزال الحركة عند تفضيل تقليل الحركة"}},"words":602,"readMinutes":4}