ما هي page-transitions؟
يُستخدم عند تنفيذ تغييرات المسار، أو عرض التحولات، أو الفتح/الإغلاق المشروط، أو الرسوم المتحركة للتنقل في تطبيقات الويب والهاتف المحمول. المصدر: dylantarre/animation-principles.
·page-transitions
*
page-transitions
✓dylantarre/animation-principlesGitHub: dylantarre/animation-principlesالمصدر: dylantarre/animation-principles
يُستخدم عند تنفيذ تغييرات المسار، أو عرض التحولات، أو الفتح/الإغلاق المشروط، أو الرسوم المتحركة للتنقل في تطبيقات الويب والهاتف المحمول.
كيفية تثبيت page-transitions
ثبّت مهارة الذكاء الاصطناعي page-transitions بسرعة في بيئة التطوير لديك عبر سطر الأوامر
- افتح الطرفية: افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal
- نفّذ أمر التثبيت: انسخ ونفّذ هذا الأمر: npx skills add https://github.com/dylantarre/animation-principles --skill page-transitions
- تحقق من التثبيت: بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
المصدر: dylantarre/animation-principles.
SKILL.md
عرض النص الخامApply Disney's 12 animation principles to route changes, view transitions, and navigation patterns.
| Squash & Stretch | Entering page elastic effect | | Anticipation | Exit animation before enter | | Staging | Hero elements bridge views | | Straight Ahead / Pose to Pose | Shared element vs crossfade | | Follow Through / Overlapping | Content settles after nav | | Slow In / Slow Out | Asymmetric enter/exit easing | | Arc | Slide transitions with curve |
| Secondary Action | Background, nav state changes | | Timing | 200-500ms total transition | | Exaggeration | Reserved for emphasis moments | | Solid Drawing | Consistent spatial model | | Appeal | Smooth, oriented navigation |
حقائق جاهزة للاقتباس
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
- أمر التثبيت
npx skills add https://github.com/dylantarre/animation-principles --skill page-transitions- الفئة
- *وسائط إبداعية
- موثق
- ✓
- أول ظهور
- 2026-03-03
- آخر تحديث
- 2026-03-10
إجابات سريعة
كيف أثبّت page-transitions؟
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/dylantarre/animation-principles --skill page-transitions بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
أين مستودع المصدر؟
https://github.com/dylantarre/animation-principles
التفاصيل
- الفئة
- *وسائط إبداعية
- المصدر
- skills.sh
- أول ظهور
- 2026-03-03