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

يوضح هذا البرنامج التعليمي كيفية تنفيذ الانتقالات والرسوم المتحركة في Vue.js. ستتعلم كيفية إنشاء انتقالات بسيطة ورسوم متحركة معقدة باستخدام امتداد انتقال المكون و CSS keyframes.

المكون الانتقالي Vue.js

يحتوي Vue.js على ملف انتقال المكون الذي يتيح لك إنشاء رسوم متحركة في تطبيقك. يلتف هذا المكون حول العنصر الهدف الذي نريد تحريكه.

هنا يلف مكون الانتقال رأس المستوى الأول:

 مرحبًا </h1>
</transition>

عندما تقوم بلف عنصر بامتداد انتقال المكون ، سيقوم المكون بتطبيق فئات انتقالية على العنصر الذي يلتف عليه. هناك ست فئات انتقالية في المجموع. ثلاثة يتحكمون في حركة العنصر عند دخوله إلى الصفحة. يتحكم الثلاثة الآخرون في الرسوم المتحركة للعنصر أثناء مغادرته الصفحة.

الكود المستخدم في هذه المقالة متوفر في هذا مستودع جيثب وهو مجاني لك لاستخدامه بموجب ترخيص MIT.

تطبيق فئات الانتقال عند دخول العناصر إلى الصفحة

أثناء عملية دخول العنصر إلى DOM ، فإن ملف انتقال مكون يطبق الطبقات الدخول من, الدخول إلى، و الدخول النشط إليها. تسمح لك هذه الفئات بالتحكم في كيفية تحريك العنصر أو انتقاله إلى الصفحة.

• الدخول من: يتم تطبيقه على العنصر قبل دخوله إلى المتصفح. يمكنك استخدام هذه الفئة لتعيين حالة CSS الأولية للعنصر.
• الدخول إلى: يتم تطبيقه على العنصر عند دخوله إلى المتصفح. يمكنك استخدام هذه الفئة لتعيين حالة CSS النهائية للعنصر.
• الدخول النشط: يتم تطبيقه أثناء انتقال العنصر من حالة إلى أخرى. هذا هو المكان الذي تملي فيه المدة التي سيستغرقها الانتقال.

دعنا نرى مثالا:

<انتقال>
 <h1> مرحبًاh1>
انتقال>
.enter- من {
العتامة: 0;
}
.enter-to {
العتامة: 1;
}
.enter-active {
انتقال: العتامة 2سيُسَهّل;
}

باستخدام هذا الرمز ، يستغرق رأس المستوى الأول ثانيتين للانتقال من غير مرئي (العتامة: 0) للظهور بالكامل (العتامة: 1). يحدث هذا الانتقال عندما يدخل العنصر إلى DOM. بدون النقل ، سيظهر النص فورًا على المتصفح بمجرد تحميل الصفحة.

تطبيق فئات الانتقال عند مغادرة العناصر للصفحة

ال انتقال يدعم المكون ثلاث فئات انتقالية أخرى تحتاج إلى تطبيقها عندما يغادر العنصر DOM. أسمائهم يغادر من, إجازة، و إجازة نشطة. تتحكم هذه الفئات في كيفية تحريك العنصر أو انتقاله من الصفحة.

كما قد تكون خمنت ، فإن هذه الفصول تشبه يدخل- الفصول التي ناقشناها سابقًا. ولكن لا يتم تنشيط هذه الفئات إلا عندما يكون العنصر على وشك فك التحميل من DOM. يعتبر التركيب والفك مفاهيم مهمة في DOM. بصفتك مطورًا ، يجب أن يكون لديك ملف الفهم الأساسي لـ DOM والمفاهيم الأخرى ذات الصلة.

دعنا نرى مثالا:

<انتقال>
 <h1> مرحبًاh1>
انتقال>
.يغادر من {
العتامة: 0;
}
.leave-to {
العتامة: 1;
}
.leave-active {
انتقال: العتامة 2سيُسَهّل;
}

في هذه الحالة ، يستغرق رأس المستوى الأول ثانيتين للانتقال ببطء من المستوى المرئي (العتامة: 1) إلى غير مرئي (العتامة: 0). يحدث هذا الانتقال عندما يغادر العنصر DOM. بدون النقل ، سيختفي النص من المتصفح على الفور.

استخدام الأسماء الانتقالية

يمكنك أيضًا إضافة ملف اسم السمة إلى عنصر الانتقال الخاص بك. عند القيام بذلك ، ستلحق Vue الاسم بفصول الانتقال الخاصة بك. هذا يعني أنه يمكن أن يكون لديك انتقالات متعددة على صفحتك ، ولكل منها فئات انتقال فريدة وخصائص CSS.

على سبيل المثال ، إذا قمت بتعيين الاسم يختفي في مكوّن النقل الخاص بك ، فسيتم عندئذٍ جميع فئات الانتقال مسبوقة بـ يختفي:

<انتقالاسم ="يختفي">
 <h1> مرحبًاh1>
انتقال>
.fade-enter-from {
العتامة: 1;
}
.fade-Leave-from {
العتامة: 1;
}
// آخر "يدخل" و "يترك" الطبقاتمعاليختفيمثلبادئة

إنشاء انتقالات باستخدام مكون الانتقال

لإثبات الانتقال في Vue.js ، ستختتم ملف H1 في حدود انتقال عنصر. تحته ، ستقوم بإنشاء زر. عند النقر فوق هذا الزر ، فإنه يقوم بتبديل المتغير showTitle بين خطأ شنيع و حقيقي.

ها هو الكود:

بعد ذلك ، حدد ملف النصي قسم. يحتوي هذا القسم على يثبت الطريقة التي تقوم فيها بتهيئة ملف showTitle متغير مع خطأ شنيع.