الواجهات والتصميم

View Transitions API

اعمل انتقالات صفحات سلسة وأصلية مع View Transitions API، بتمكّن التنقل المتحرك بدون أطر JavaScript.

Claude Code Cursor Copilot Windsurf

نظرة عامة

تتيح View Transitions API انتقالات متحركة سلسة بين حالات الصفحة أو بين الصفحات أثناء التنقل. يمكن لعملاء الذكاء الاصطناعي تنفيذ انتقالات داخل المستند الواحد (لتطبيقات SPA) وانتقالات عبر المستندات (لتطبيقات MPA) باستخدام واجهة document.startViewTransition() وخصائص CSS view-transition-name.

للانتقالات داخل المستند الواحد، يمكن لعميل الذكاء الاصطناعي تغليف تحديثات الحالة في document.startViewTransition() لتحريك الانتقال بين حالات DOM القديمة والجديدة. للانتقالات عبر المستندات في MPA، يمكنه إضافة قاعدة @view-transition وخصائص CSS view-transition-name لإنشاء انتقالات عناصر مشتركة بين الصفحات بدون أي JavaScript.

أطر العمل مثل Astro و Next.js و SvelteKit لديها دعم مدمج لـ View Transitions. يمكن لعملاء الذكاء الاصطناعي تنفيذ انتقالات الصور البطلة، وحركات من القائمة للتفاصيل، وتلاشي الصفحات، وانتقالات التحول التي تجعل التطبيقات متعددة الصفحات تبدو سلسة كالتطبيقات الأصلية.

لمن هذه الأداة؟

مطورين بيضيفوا انتقالات صفحات لتطبيقات متعددة الصفحات
فرق بتنفذ حركات عناصر مشتركة بين المسارات
مهندسي frontend بيعملوا تنقل شبيه بالتطبيقات في Astro أو Next.js
مصممين بينفذوا انتقالات حالة سلسة بدون مكتبات ثقيلة

التثبيت

إعداد Claude Code

View Transitions API مدمجة في المتصفحات الحديثة — مفيش حاجة تتثبت

الإعدادات

/* CSS for cross-document transitions */
@view-transition { navigation: auto; }

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

::view-transition-old(hero) {
  animation: fade-out 0.3s ease-out;
}
::view-transition-new(hero) {
  animation: fade-in 0.3s ease-in;
}

/* JS for same-document transitions */
document.startViewTransition(() => {
  updateDOM();
});

زيارة المصدر (Chrome Developers)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

الواجهات والتصميم

Figma MCP Server

تحويل تصاميم Figma إلى كود مباشرة مع الحفاظ على الأنماط والمكونات.

Claude Code Cursor Windsurf

الواجهات والتصميم

Storybook Component Docs

إنشاء توثيق تفاعلي لمكونات الواجهة مع أمثلة حية وحالات استخدام.

Claude Code Copilot Cursor

الواجهات والتصميم

Tailwind CSS IntelliSense

إكمال تلقائي ذكي لأصناف Tailwind مع معاينة الألوان والقيم أثناء الكتابة.

Claude Code Copilot Cursor