المهارات vercel-react-view-transitions

📦

vercel-react-view-transitions

Name: vercel-react-view-transitions
Author: vercel-labs

آمن

إضافة انتقالات العرض الأصلية إلى تطبيقات React

يتطلب إضافة انتقالات سلسة بين الصفحات ورسوم متحركة للعناصر المشتركة إلى تطبيقات React فهم واجهة View Transitions API وأنماط تكاملها. توفر هذه المهارة إرشادات خطوة بخطوة وصفحات أنماط CSS وأنماط Next.js من مختبرات Vercel.

يدعم: Claude Codex Code(CC)

🥈 79 فضي

تنزيل ZIP المهارة

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

فعّل وابدأ الاستخدام

اختبرها

استخدام "vercel-react-view-transitions". أضف انتقالات إلى قائمة منتجاتي

النتيجة المتوقعة:

لف عناصر منتجك في <ViewTransition> بمفاتيح فريدة، أضف CSS لـ ::view-transition-old/new pseudo-elements، واستخدم startTransition لتحريك الرسوم المتحركة عند تغيير الحالة.

استخدام "vercel-react-view-transitions". لماذا لا يتم تحريك زر العودة في المتصفح؟

النتيجة المتوقعة:

تستخدم أزرار العودة/التقدم في المتصفح أحداث popstate المتزامنة، وهي غير متوافقة مع startViewTransition. استخدم router.push() مع عناوين URL صريحة بدلاً من ذلك للحفاظ على دعم الرسوم المتحركة.

استخدام "vercel-react-view-transitions". كيف يمكنني تحريك إعادة ترتيب القائمة؟

النتيجة المتوقعة:

عيّن قيم view-transition-name فريدة لكل عنصر باستخدام معرفه. عند إعادة ترتيب العناصر، يلتقط المتصفح تلقائيًا تغيير الموضع ويحركه بسلاسة.

التدقيق الأمني

آمن

v1 • 4/19/2026

All static findings are false positives. The skill is legitimate documentation from Vercel Labs for implementing React View Transitions. No malicious code patterns exist. All 781 flagged instances are benign keyword matches in markdown documentation (backticks for code formatting, words like 'keystroke' in UI context, TypeScript type names, and standard documentation URLs).

الملفات التي تم فحصها

2,199

الأسطر التي تم تحليلها

النتائج

إجمالي عمليات التدقيق

لا توجد مشكلات أمنية

تم تدقيقه بواسطة: claude

درجة الجودة

الهندسة المعمارية

100

قابلية الصيانة

المحتوى

المجتمع

100

الأمان

الامتثال للمواصفات

ماذا يمكنك بناءه

إضافة انتقالات الصفحات إلى تطبيق Next.js

تنفيذ انتقالات انزلاقية سلسة عندما يتنقل المستخدمون بين المسارات في تطبيق Next.js باستخدام App Router وعلم viewTransition التجريبي.

إنشاء رسوم متحركة للعناصر المشتركة

جعل صور المنتجات تتحول بسلاسة من بطاقة في الشبكة إلى عرض صفحة التفاصيل، مما يخلق إحساسًا متميزًا كتطبيقات الهاتف المحمول الأصلية.

تحريك حالات تحميل البيانات

استبدال وميض المحتوى المفاجئ بكشف سلس لـ Suspense يحرك ظهور المحتوى بعد جلب البيانات بسلاسة.

جرّب هذه الموجهات

إضافة انتقالات الصفحات

أضف انتقالات العرض إلى تطبيق Next.js الخاص بي بحيث تنزلق الصفحات عند التنقل

تنفيذ عنصر مشترك

لدي شبكة منتجات. عند النقر على منتج، يجب أن يتحرك الصورة من الشبكة إلى صفحة التفاصيل الرئيسية

إصلاح تعارضات الرسوم المتحركة

انتقالات العرض الخاصة بي تتعطل عند حل Suspense. كيف أمنع الرسوم المتحركة المتداخلة من التدخل مع انتقالات الصفحة؟

التنقل الاتجاهي

تنفيذ رسوم متحركة للتنقل للأمام والخلف تنزلق في اتجاهات متعاكسة بحيث يشعر المستخدمون بعمق مكاني في تطبيقي

أفضل الممارسات

ابدأ خطوة التدقيق - حدد جميع الأماكن التي تحتاج انتقالات قبل كتابة الكود
انسخ وصفحات أنماط CSS من المهارة بدلاً من كتابة رسوم متحركة مخصصة من الصفر
اختبر دائمًا مع تفضيلات الحركة المخففة وتدهور سلس للمتصفحات القديمة

تجنب

لا تستدع document.startViewTransition() مباشرة - دع مكون ViewTransition يتعامل معها
تجنب الانزلاقات الاتجاهية للتنقل الجانبي (علامات التبويب) - هذا يعني زوراً عمقاً مكانياً
لا تلف ViewTransition داخل div - يجب أن يكون المكون هو المغلّف الخارجي لتمكين الدخول والخروج

الأسئلة المتكررة

أي إصدار React أحتاج؟

مطلوب React canary. يتضمن Next.js App Router ذلك تلقائيًا. للإطارات الأخرى، ثبّت react@canary و react-dom@canary.

هل هذا يعمل مع App Router؟

نعم. فعّل experimental.viewTransition في next.config.js، استخدم prop transitionTypes على next/link، واتبع الأنماط في references/nextjs.md.

لماذا لا تعمل الرسوم المتحركة الخاصة بي؟

تحقق من أن ViewTransition يغلّف المكون كعنصر خارجي، استخدم startTransition/useDeferredValue/Suspense كمحفزات، وعيّن default="none" إلا إذا كنت تريد تلاشي متقاطع عند كل تغيير.

كيف أتعامل مع دعم المتصفح؟

المتصفحات غير المدعومة تتخطى الرسوم المتحركة بسلاسة. أضف دائمًا CSS لاستعلام الوسائط reduced-motion من ملف المرجع css-recipes.

هل يمكنني تحريك زر العودة في المتصفح؟

لا. تستخدم أزرار العودة/التقدم في المتصفح popstate متزامن غير متوافق مع startViewTransition. استخدم router.push() مع عناوين URL صريحة بدلاً من ذلك.

كيف أمنع الرسوم المتحركة أثناء التحديثات الخلفية؟

عيّن default="none" على مكونات ViewTransition. هذا يعطل الرسوم المتحركة ما لم يتم تمكينها صراحةً مع props enter/exit/share.