دليل قراءة متعدد اللغات للمهارة
vercel-react-view-transitionsالغرض والاستخدام والمصدر
دليل لتنفيذ رسوم متحركة سلسة وطبيعية باستخدام واجهة برمجة تطبيقات انتقال العرض في React ( component, إضافة نوع الانتقال, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, بدء الانتقال بين العرضين, ViewTransition، أنواع الانتقال، أو يسأل عن كيفية تحريك عناصر واجهة المستخدم بين حالاتها في React بدون مكتبات الرسوم المتحركة الخارجية.
تم استرجاع المصدر:
- مستودع المصدر
- vercel-labs/agent-skills
- SKILL.md
skills/react-view-transitions/SKILL.md- نجوم المستودع
- 33,269
- آخر تحديث للمستودع
- 2026-10-29
- تصنيف القدرات
- تطوير
- وقت التجميع الأخير
الترخيص: غير محدد
مقتطفات سير العمل هي أدوات مساعدة للقراءة، وليست تعليمات تنفيذية من Codez. لم يتم تشغيل أي مهارة تابعة لجهة خارجية لإنتاج هذه الصفحة.
تُعدّ فقرات الغرض وسير العمل الواردة أدناه موادًا أساسية، مُنظّمة ومترجمة لتسهيل القراءة. وهي تختلف عن التحليل التحريري لـ Codez المُصنّف بشكل منفصل.
ما تفعله هذه المهارة
دليل لتنفيذ رسوم متحركة سلسة وطبيعية باستخدام واجهة برمجة تطبيقات انتقال العرض في React ( component, إضافة نوع الانتقال, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, بدء الانتقال بين العرضين, ViewTransition، أنواع الانتقال، أو يسأل عن كيفية تحريك عناصر واجهة المستخدم بين حالاتها في React بدون مكتبات الرسوم المتحركة الخارجية.
طريقة الاستخدام وفق المستند الأصلي
سير عمل التنفيذ
عند إضافة انتقالات العرض إلى تطبيق موجود، اتبع ما يلي:references/implementation.mdخطوة بخطوة. ابدأ بالتدقيق - لا تتجاهله. استخدمreferences/css-recipes.mdللحصول على CSS المناسب وتكييفه مع التطبيق.
مقتطف من المصدر · L51 ↗متى يتم تحريك الرسوم المتحركة
يجب أن يُشير كل عنصر إلى علاقة مكانية أو استمرارية. إذا لم تستطع توضيح ما يُشير إليه، فلا تُضفه. طبّق جميع الأنماط المُناسبة من هذه القائمة، بهذا الترتيب: هذا ترتيب للتنفيذ، وليس قائمة "اختر واحدًا". طبّق كل نمط يُناسب التطبيق. تخطَّ نمطًا فقط إذا لم يكن للتطبيق أي حالة استخدام له.
مقتطف من المصدر · L14 ↗انتقالات عرض React
يمكنك تحريك عناصر واجهة المستخدم بين الحالات المختلفة باستخدام خاصية المتصفح الأصلية.document.startViewTransition. صرّح *بماذا* باستخدام , trigger *when* with بدء الانتقال / استخدام القيمة المؤجلة / يمكنك التحكم في كيفية حدوث التشويق باستخدام فئات CSS. تتخطى المتصفحات غير المدعومة الرسوم المتحركة بسلاسة.
import { ViewTransition } from 'react';
<ViewTransition>
<Component />
</ViewTransition>المتطلبات والإعداد
لم يتم اختيار أي فقرة متطلبات مختصرة من هذا الملف. هذا لا يعني أن المهارة لا تعتمد على أي ملفات أخرى. راجع تعليمات إعداد المستودع والملفات المرجعية.
الحدود وفحوصات الجودة
قيود VT المتداخلة
عندما يكون أحد الوالدين VTmounts/unmountsباعتبارها وحدة واحدة تحتوي على وحدات VT متداخلة بداخلها، فإن الوحدات المتداخلة لا تطلق النار بشكل مستقل.enter/exit— لا يتحرك سوى الكائن الظاهري الخارجي. (يُطلق الكائن الظاهري الفرعي المُثبَّت داخل الكائن الظاهري الرئيسي *المستمر* النار).enter/exit(عادةً.) لا تتوفر حاليًا الرسوم المتحركة المتدرجة لكل عنصر أثناء التنقل بين الصفحات فيNext.jsانظر قسم استكشاف الأخطاء وإصلاحها لمعرفة حالة النسخة التجريبية.
مقتطف من المصدر · L304 ↗ابدأ بتجربة آمنة
- تحقق من المضيف المدعوم وتعليمات تثبيت المستودع. احتفظ بمجلد المهارات والبرامج النصية والأصول والوثائق المشار إليها معًا؛SKILL.mdقد يؤدي وجود شخص واحد فقط إلى إغفال بعض التبعيات.
- زوّد البرنامج ببياناتك الفعلية، والمخرجات المطلوبة، ومعايير القبول. يعتمد بناء جملة الاستدعاء والأدوات المتاحة على النظام المضيف؛ ولا يفترض هذا الموقع وجود أمر تثبيت موحد.
- جرّب سير العمل الأصلي في مشروع مؤقت أو على نسخة احتياطية. راجع العمليات التي تُغيّر الملفات أو الخدمات البعيدة أو الموارد القابلة للفوترة قبل السماح بها.
- تحقق من صحة المخرجات بمقارنتها بفحوصات جودة المصدر ومتطلباتك الخاصة. لا يُعدّ نجاح عملية التشغيل أو ارتفاع عدد النجوم في المستودع دليلاً على صحة النتيجة.
اقرأ المزيد في المصدر
- انتقالات عرض React
- متى يتم تحريك الرسوم المتحركة
- اختيار أسلوب الرسوم المتحركة
- التوافر
- سير عمل التنفيذ
- المكون
- محفزات الرسوم المتحركة
- قاعدة التوزيع الحرج
- الدعائم
- عناصر CSS الزائفة
- أنواع الانتقال
router.back()وزر الرجوع في المتصفح- الأنواع والتشويق
- جاهزية العناصر المشتركة
- انتقالات العناصر المشتركة
- إعادة ترتيب القائمة
- تغيير شكل الإزاحة التخطيطية
- تكوين العناصر المشتركة باستخدام هوية القائمة
- إعادة الدخول بالقوة مع
key - التشويق والعودة إلى المحتوى
- كيفية تفاعل عدة كائنات افتراضية
- يستخدم
default="none"عمدًا - نمطان يتعايشان
- قيود VT المتداخلة
- Next.jsاندماج
- إمكانية الوصول
- ملفات مرجعية
- وثيقة كاملة مجمعة
المهارات ذات الصلة
الترجمة والنطاق
يختار دليل القراءة هذا مقاطع من المصدر الرئيسي المثبتSKILL.mdهذه الترجمة مساعدة. وهي ليست دليلاً كاملاً ولا تضمن التوافق المُختَبَر. يُرجى قراءة النص الأصلي والملفات المُشار إليها قبل الاستخدام.
تشير هذه المقدمة إلى النسخة المثبتة أدناه؛ ويتم عرض نشاط المستودع الحالي ووقت التجميع بشكل منفصل.
- المصدر بإصدار ثابت
- اقرأ الأصل ↗
- تم استرجاع المصدر
- معرّف نسخة Git
1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62- المصدر SHA-256
693acbddd1d2dcf774286867efbc9a5c09dce2da6f21f8e12618187a92f2106a