يتيح لك نظام الانتقال vue.js تطبيق تأثيرات الانتقال تلقائيًا عند إدراج العناصر أو إزالتها من DOM. ستؤدي Vue.js إلى تحولات CSS أو الرسوم المتحركة لك في الوقت المناسب ، ويمكنك أيضًا توفير وظيفة ربط JavaScript المقابلة لأداء عمليات DOM مخصصة أثناء عملية الانتقال.
من أجل تطبيق تأثير الانتقال ، تحتاج إلى استخدام ميزة الانتقال على العنصر الهدف:
<div v-if = "show" transition = "my-transition"> </div>
يمكن استخدام ميزة الانتقال مع الموارد التالية:
• V-if
• V-Show
• V-for (تم إطلاقه فقط عند الإدخال والحذف ، باستخدام البرنامج المساعد القائم على Vue)
• المكونات الديناميكية (انظر مكونات المقدمة)
• على عقدة الجذر للمكون ، وينتج عن طريقة DOM مثيل VUE (مثل VM. $ appendto (EL)).
عند إدخال عنصر أو حذفه مع انتقال ، سوف:
1. حاول العثور على كائن ربط JavaScript Transition مع معرف "My -Transition" - سجل مع Vue.Transition (ID ، Hooks) أو Transitions. إذا وجدت ، سيتم استدعاء الخطاف المقابل في مراحل مختلفة من الانتقال.
2. استنشق العنصر المستهدف تلقائيًا لتحولات CSS أو الرسوم المتحركة ، وإضافة/إزالة اسم فئة CSS عند الاقتضاء.
3. إذا لم يتم العثور على خطاف JavaScript ولم يتم اكتشاف انتقال CSS/الرسوم المتحركة ، يتم تنفيذ عملية DOM (إدراج/حذف) فورًا في الإطار التالي.
انتقال CSS
مثال
انتقال CSS النموذجي مثل هذا:
<div v-if = "show" transition = "sext"> hello </iv>
ثم أضف قواعد CSS لـ ".expand-transition" و `.expand-enter` و` .expand-leave`:
/* مطلوب*/. التوسع في الانتقال {Transition: All .3S Ease ؛ الارتفاع: 30 بكسل ؛ الحشو: 10 بكسل ؛ لون الخلفية: #EEE ؛ overflow: Hidden ؛}/* .expand-enter يحدد حالة البدء من الإدخال* //* .expand-leave تحدد حالة نهاية المغادرة*/. التوسيع ، .expand-leave {الارتفاع: 0 ؛ الحشو: 0 10px ؛ التعتيم: 0 ؛}يمكنك تحقيق تحولات مختلفة على نفس العنصر من خلال الربط الديناميكي:
<div v-if = "show": Transition = "TransitionName"> Hello </iv>
New Vue ({el: '...' ، البيانات: {show: false ، transitionName: 'fade'}})بالإضافة إلى ذلك ، يمكن توفير خطافات JavaScript:
vue.transition ('expend "، {quortenter: function (el) {el.textContent =' Quartenter '} ، Enter: function (el) {el.textContent =' Enter '} ، afterenter: function (el) {eltextcontent =' efterenter '}} ercercancelled: function (el) {// canylation {el.textContent = 'beforeleave'} ، ترك: الدالة (el) {el.textContent = 'Leave'} ، AfterLeave: function (el) {el.textContent = 'AfterLeave'} ، LeaveCancelled: function (el) {// handledation}}}})اسم فئة CSS الانتقالية
تعتمد إضافة وتبديل أسماء الفصول على قيمة سمة الانتقال. على سبيل المثال ، Transition = "Fade" ، سيكون هناك ثلاثة أسماء فئة CSS:
1 .. يتم الاحتفاظ بالانتقال إلى العنصر دائمًا.
2..Fade-Enter يحدد حالة بداية دخول الانتقال. تطبيق إطار واحد فقط وحذفه على الفور.
3..Fade-Leave تحدد الحالة النهائية لترك الانتقال. فعالة في بداية انتقال المغادرة وحذفها بعد انتهائه.
إذا كانت سمة الانتقال لا تحتوي على قيمة ، فإن أسماء الفصول هي .v الانتقال ، .v-enter ، و .v-leave افتراضيًا.
اسم فئة الانتقال المخصص
1.0.14 جديد
يمكننا إعلان اسم فئة CSS المخصصة في تعريف JavaScript الانتقالي. هذه أسماء الفئات المخصصة تتجاوز أسماء الفصول الافتراضية. يمكن أن يكون مفيدًا للغاية عندما تحتاج إلى التعاون مع مكتبات الرسوم المتحركة CSS من طرف ثالث مثل ANIMAT.CSS:
<div v-show = "ok" transition = "bounce"> شاهدني ترتد </div>
vue.transition ('Bounce' ، {enterclass: 'bounceinleft' ، leaveclass: 'Bounceoutright'})أعلن صراحة نوع انتقال CSS
1.0.14 جديد
يحتاج Vue.js إلى إضافة مستمع حدث إلى عنصر الانتقال للاستماع إليه عندما ينتهي الانتقال. استنادًا إلى CSS المستخدمة ، يكون الحدث إما انتقالية أو رسوم متحركة. إذا كنت تستخدم واحدة فقط من الاثنين ، فسيتمكن Vue.js من استنتاج نوع الحدث المقابل تلقائيًا استنادًا إلى قواعد CSS الفعالة. ومع ذلك ، في بعض الحالات ، قد يحتاج العنصر إلى وجود نوعين من الرسوم المتحركة في نفس الوقت. على سبيل المثال ، قد ترغب في تشغيل VUE الرسوم المتحركة CSS ، والعنصر له تأثير انتقالي CSS عند تعليق الماوس. في هذه الحالة ، تحتاج إلى الإعلان صراحة عن نوع الرسوم المتحركة (الرسوم المتحركة أو الانتقال) التي تريد أن تتعامل معها:
vue.transition ('Bounce' ، {// هذا التأثير الانتقالي سوف يستمع فقط لنوع الحدث `AnimationEnd`: 'الرسوم المتحركة'})شرح مفصل لعملية الانتقال
عندما تتغير خاصية العرض ، ستقوم vue.js بإدخال أو حذف عنصر <viv> وفقًا لذلك ، مما يؤدي إلى تغيير اسم فئة CSS الانتقالية وفقًا للقواعد التالية:
• إذا أصبح العرض خطأ ، فإن Vue.js سوف:
1. اتصل بخطاف BeForeleave ؛
2. أضف اسم فئة V-Leave إلى العنصر لتحفيز الانتقال ؛
3. اتصل بخطاف الإجازة ؛
4. انتظر الانتقال إلى النهاية (استمع إلى حدث الانتقال) ؛
5. حذف العناصر من DOM وحذف اسم فئة V-Leave ؛
6. استدعاء خطاف adeleve.
• إذا أصبح العرض صحيحًا ، فإن Vue.js سوف:
1. استدعاء خطاف poinenter ؛
2. أضف اسم فئة V-Enter إلى العنصر ؛
3. أدخله في DOM ؛
4. استدعاء خطاف إدخال ؛
5. قوة تخطيط CSS مرة واحدة لجعل V-Enter فعالة. ثم قم بحذف اسم فئة V-Enter لتشغيل الانتقال والعودة إلى الحالة الأصلية للعنصر ؛
6. انتظر الانتقال إلى النهاية ؛
7. اتصل بخطاف Afterenter.
بالإضافة إلى ذلك ، إذا تمت إزالة عنصر ما أثناء انتقال إدخاله قيد التقدم ، يتم استدعاء الخطاف المرتبط بتنظيف التغييرات أو إدخال أجهزة ضبط الوقت التي تم إنشاؤها. وينطبق الشيء نفسه على ترك الانتقال بدوره.
عندما يتم استدعاء جميع وظائف الخطاف أعلاه ، فإن هذا يشير إلى مثيل VUE الذي ينتمون إليه. قواعد التجميع: في أي سياق يتم تجميع الانتقال ، هذه النقطة التي سياقها.
أخيرًا ، يمكن أن يكون لـ Enter and Lead معلمة رد اتصال اختيارية ثانية تتحكم صراحة في كيفية انتهاء الانتقال. لذلك ، ليست هناك حاجة لانتظار حدث Transitionend CSS ، سوف تنتظر Vue.js حتى تتصل بهذا الاتصال يدويًا لإنهاء الانتقال. على سبيل المثال:
أدخل: الدالة (EL) {// لا توجد معلمة ثانية // يحدد حدث Transitionend CSS عندما ينتهي الانتقال}مقابل
أدخل: الدالة (EL ، تم) {// هناك معلمة ثانية // الانتقال ينتهي فقط عندما يسمى "Done`}}<p> عندما تنتقل عناصر متعددة معًا ، فإن Vue.js ستعمل على زيادة عملية التخطيط مرة واحدة.
الرسوم المتحركة CSS
استخدام الرسوم المتحركة CSS هو الانتقال إلى CSS. الفرق هو أنه في الرسوم المتحركة ، لا يتم حذف اسم فئة V-Enter فور إدراج العقدة في DOM ، ولكن يتم حذفه عند تشغيل حدث الرسوم المتحركة.
مثال: (تم حذف بادئة التوافق)
<span v-show = "show" transition = "bounce"> انظر إلي! </span> .bounce-transition {display: inline block ؛ /* وإلا فلن تعمل الرسوم المتحركة المقياس*/}. enter-enter {الرسوم المتحركة: Bounce-in .5S ؛}. Bounce-Leave {Animation: Bounce-Out .5S ؛}@keyframes bounce-in {0 ٪ {transform: scale (0) ؛ } 50 ٪ {transform: scale (1.5) ؛ } 100 ٪ {transform: Scale (1) ؛ }}@keyframes bounce-out {0 ٪ {transform: scale (1) ؛ } 50 ٪ {transform: scale (1.5) ؛ } 100 ٪ {transform: Scale (0) ؛ }}انتقال جافا سكريبت
يمكنك أيضًا استخدام خطافات JavaScript فقط دون تحديد أي قواعد CSS. عند استخدام JavaScript فقط ، تحتاج السنانير Enter and Left إلى استدعاء رد الاتصال الذي تم القيام به ، وإلا فإنها سيتم استدعاؤها بشكل متزامن وسينتهي الانتقال على الفور.
إنها لفكرة جيدة أن نعلن صراحةً CSS: كاذبة لتحولات JavaScript ، وسوف تتخطى Vue.js اكتشاف CSS. سيمنع هذا أيضًا قواعد CSS من التدخل في الانتقال عن غير قصد.
في المثال التالي ، نستخدم jQuery لتسجيل انتقال JavaScript مخصص:
vue.transition ('fade' ، {css: false ، ادخل: الدالة (el ، تم القيام به) {// تم إدراج العنصر في dom // يسمى بعد الرسوم المتحركة $ (el) .css ('opatity' ، 0) .antiment ({{{elspality: 1} ، 1000 ، ext)}} {// same as enter $ (el) .animate ({opatity: 0} ، 1000 ، ext)} ، leaveCancelled: function (el) {$ (el) .stop ()}})ثم استخدم ميزة الانتقال:
<p transition = "fade"> </p>
انتقال مقارب
يمكن استخدام التحولات مع v-for لإنشاء انتقال مقارب. أضف ميزة stagger أو enter-stagh أو إجازة إلى عنصر الانتقال:
<div v-for = "item in list" transition = "stagger" stagger = "100"> </viv>
بدلاً من ذلك ، قم بتوفير خطاف stagger أو ادخل أو يترك الإجازة لتحكم أفضل:
vue.transition ('stagger' ، {stagger: function (index) {// يضيف كل عنصر انتقالي 50 مللي ثانية تأخير // ولكن الحد الأقصى لدرجة التأخير هو 300 مللي ثانية return math.min (300 ، index * 50)}})تم تجميع هذه المقالة في "Vue.js Front Component Learning Tutorial" ، والجميع مرحب بهم للتعلم والقراءة.
للدروس التعليمية على مكونات vue.js ، يرجى النقر على الموضوع الخاص التعليمي التعليمي للموضوع Vue.js للتعلم.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.