Vue Academy · درس

انتقالات CSS والرسوم المتحركة

خاصية transition في CSS، ورسوم keyframe المتحركة، واستخدام Animate.css مع Vue Transition

انتقالات CSS والرسوم المتحركة درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

طريقتان للتحريك باستخدام CSS

توفر CSS أداتين تتكاملان تمامًا مع انتقالات Vue: الخاصية transition (للاستيفاء بين حالتين) و@keyframes مع animation (للخطوط الزمنية متعددة المراحل). ويمكن لـ Vue تشغيل أي منهما.

الاختصار transition

يجمع الاختصار transition الخاصية والمدة ودالة التوقيت والتأخير في سطر واحد. والترتيب هو: الخاصية، والمدة، ودالة التخفيف، والتأخير.

.box {
  /* property duration easing delay */
  transition: transform 0.4s ease-in-out 0s;
}

تحريك خصائص متعددة

افصلوا الانتقالات المتعددة بفواصل. ويمكنكم تحريك transform وopacity معًا لإضافة تأثير انزلاق وتلاشي.

.slide-enter-active,
.slide-leave-active {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
.slide-enter-from {
  transform: translateX(20px);
  opacity: 0;
}

متى لا تكون transition كافية

تحرّك transition فقط بين حالتين. أما الارتداد أو النبض أو الحركة متعددة المراحل، فتحتاجون إلى @keyframes التي تتيح لكم تحديد نقاط وسيطة عديدة.

تعريف Keyframes

تسمّي @keyframes تسلسلًا من الحالات باستخدام النسب المئوية (أو from/to). وتصف كل نقطة أنماط العنصر عند ذلك الموضع من الخط الزمني.

@keyframes bounce-in {
  0% { transform: scale(0); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

خاصية animation

طبّقوا مجموعة keyframes باستخدام الاختصار animation: الاسم، والمدة، ودالة التوقيت، والتأخير، وعدد التكرارات، والاتجاه.

.bounce-enter-active {
  animation: bounce-in 0.5s ease both;
}

ربط Keyframes بـ Transition

ضعوا animation في الفئة enter-active حتى تعمل أثناء الإدراج. وعند المغادرة، شغّلوا keyframes نفسها بالعكس.

.bounce-leave-active {
  animation: bounce-in 0.5s ease reverse both;
}

استخدام Animate.css

تُعد Animate.css مكتبة من الرسوم المتحركة الجاهزة المستندة إلى keyframes. وبدلًا من كتابة الفئات الخاصة بكم، أخبروا Vue باستخدام فئات Animate.css مباشرةً عبر خصائص custom-class.

<!-- after importing animate.css -->
<!-- classes like animate__fadeIn are predefined -->

enter-active-class وleave-active-class

يقبل <Transition> خصائص لتجاوز أسماء الفئات التي يتم إنشاؤها تلقائيًا. وتتيح لكم enter-active-class وleave-active-class إدراج أي فئة خارجية — وهو مثالي لـ Animate.css.

<Transition
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <div v-if="show">Animated by Animate.css</div>
</Transition>

تعيين المدة صراحةً

عندما يكون توقيت CSS غير واضح (بسبب الجمع بين animation وtransition)، عيّنوا الخاصية duration حتى تعرف Vue بالضبط متى تزيل الفئات. وتقبل هذه الخاصية رقمًا أو كائنًا يحتوي على enter/leave.

<Transition :duration="{ enter: 500, leave: 300 }">
  <div v-if="show">Precise timing</div>
</Transition>

أهمية دوال التخفيف

تحدد دالة التوقيت طبيعة الإحساس بالحركة. تبدو ease-out سريعة الاستجابة عند الدخول، وتناسب ease-in المغادرة، بينما تمنحكم cubic-bezier() تحكمًا كاملًا.

.pop-enter-active {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

اختبار سريع

أي خاصية تتيح لكم تطبيق فئة Animate.css أثناء الدخول؟

مراجعة

قارنت بين الاختصار transition (الاستيفاء بين حالتين) وبين @keyframes مع animation (مخططات زمنية متعددة الخطوات)، وتعلمت كيفية دمج Animate.css باستخدام الخاصيتين enter-active-class وleave-active-class، مع استخدام duration لضبط التوقيت بدقة.

الأسئلة الشائعة

هل درس «انتقالات CSS والرسوم المتحركة» مجاني؟

نعم — نص درس «انتقالات CSS والرسوم المتحركة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «انتقالات CSS والرسوم المتحركة»؟

خاصية transition في CSS، ورسوم keyframe المتحركة، واستخدام Animate.css مع Vue Transition تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «انتقالات CSS والرسوم المتحركة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy