من خلال نظام الانتقال Vue.js ، يمكنك بسهولة إضافة تأثيرات الرسوم المتحركة الانتقالية إلى عملية إدخال/إزالة عقد DOM. سيقوم VUE بإضافة/إزالة أسماء فئة CSS في الوقت المناسب لتشغيل تأثيرات الانتقال/الرسوم المتحركة CSS3. يمكنك أيضًا توفير وظيفة خطاف JavaScript المقابلة لإجراء عمليات DOM مخصصة أثناء عملية الانتقال.
أخذ تعليمات v-transition = "my-transition" كمثال ، عندما يتم إدخال عقدة DOM مع هذه التعليمات أو إزالتها ، سوف:
استخدم معرف My-Transition لمعرفة ما إذا كان هناك كائن ربط JavaScript مسجل. يمكن تسجيل هذا الكائن على مستوى العالم بواسطة vue.transition (id ، الخطافات) أو محددة داخل المكون الحالي من خلال خيار التحولات. إذا تم العثور على هذا الكائن ، فسيتم استدعاء الخطاف المقابل في مراحل مختلفة من الرسوم المتحركة الانتقالية.
اكتشف تلقائيًا ما إذا كان العنصر المستهدف له تأثيرات انتقالية CSS أو تأثيرات الرسوم المتحركة المطبقة ، وإضافة/إزالة اسم فئة CSS في الوقت المناسب.
إذا لم يتم توفير وظيفة خطاف JavaScript ولم يتم اكتشاف تأثير انتقال CSS/الرسوم المتحركة المقابلة ، يتم إجراء إدخال/إزالة DOM فورًا في الإطار التالي.
لن تسري كل تأثيرات انتقال Vue.js إلا إذا تم تشغيل عملية DOM من خلال Vue.js. يمكن إجراء التشغيل عن طريق التعليمات المدمجة ، مثل V-IF ، أو من خلال طرق مثيل VUE ، مثل VM. $ Appendto ().
تأثير الانتقال CSS
يتم تعريف تأثير انتقال CSS النموذجي على النحو التالي:
<div v-if = "show" v-transition = "sext"> hello </iv>
تحتاج أيضًا إلى تحديد ثلاثة فصول CSS:. Expand-transition و .expand-enter و .expand-leave:
.expand-transition {Transition: All .3s Ease ؛ الارتفاع: 30 بكسل ؛ الحشو: 10 بكسل ؛ لون الخلفية: #EEE ؛ الفائض: مخفي ؛}. Exply-Enter ، .expand-leave {الارتفاع: 0 ؛ الحشو: 0 10px ؛ التعتيم: 0 ؛}في الوقت نفسه ، يمكنك أيضًا توفير خطافات JavaScript:
vue.transition ('expend "، {poinenter: function (el) {el.textContent =' Quartenter '} ، enter: function (el) {el.textContent =' Enter '} ، afterenter: function (el) {el.textcontent =' efreenter '}} ercercancelled: function ( (el) {el.textContent = 'beforeleave'} ، ترك: الدالة (el) {el.textContent = 'Leave'} ، AfterLeave: function (el) {el.textContent = 'AfterLeave'} ، LeaveCancelled: Function (نتيجة
يتم تحديد اسم فئة CSS المستخدمة هنا من خلال قيمة التوجيه V. أخذ V-Transition = "FADE" كمثال ، سيكون هناك دائمًا ما يتواجد النقل في فئة CSS ، وسيتم إضافة أو إزالتها تلقائيًا في الوقت المناسب. عندما لا يوفر التوجيه V-Transition قيمة ، فإن أسماء فئة CSS المستخدمة ستكون الافتراضية .v الانتقالية ، .v-enter ، و .v-leave.
عندما تتغير سمة العرض ، ستقوم VUE بإدراج/إزالة عنصر <viv> استنادًا إلى قيمته الحالية ، وإضافة/إزالة فئة CSS المقابلة في الوقت المناسب ، على النحو التالي:
عندما يصبح العرض كاذبًا ، فإن Vue سوف:
1. اتصل بخطاف BeForeleave ؛
2. قم بتطبيق فئة CSS .v-lave على العنصر لتشغيل تأثير الانتقال ؛
3. اتصل بخطاف الإجازة ؛
4. انتظر حتى يتم تنفيذ تأثير الانتقال ؛ (استمع إلى حدث الانتقال)
5. قم بإزالة العناصر من DOM وإزالة فئة CSS .V.
6. استدعاء خطاف adeleve.
عندما يكون العرض صحيحًا ، فإن Vue سوف:
1. استدعاء خطاف poinenter ؛
2. تطبيق css class.v-enter على العنصر ؛
3. أدخل العنصر في DOM ؛
4. استدعاء خطاف إدخال ؛
5. قم بتطبيق فئة .V-Enter ، ثم فرض تخطيط CSS لضمان سريان .V-Enter ؛ أخيرًا ، قم بإزالة .V-Enter لإطلاق العنصر للانتقال إلى حالته الأصلية.
6. انتظر حتى يتم تنفيذ تأثير الانتقال ؛
7. اتصل بخطاف Afterenter.
بالإضافة إلى ذلك ، إذا تمت إزالة عنصر ينفذ تأثير انتقالي وارد قبل الانتهاء من الانتقال ، فسيتم تنفيذ الخطاف المرتبط. يمكن استخدام هذا الخطاف لتنظيف العمل ، مثل إزالة أجهزة ضبط الوقت التي تم إنشاؤها عند Enter. وينطبق الشيء نفسه على العناصر التي يتم إعادة إدراجها أثناء الانتقال.
عند تنفيذ جميع وظائف الخطاف أعلاه ، يشير هذا إلى مثيل VUE المقابل. إذا كان هناك عنصر نفسه هو عقدة الجذر لمثيل VUE ، فسيتم تطبيق المثيل على هذا النحو ؛ وإلا فإن هذا يشير إلى المثيل الذي تنتمي إليه تعليمات الانتقال.
أخيرًا ، يمكن أن تقبل وظائف الخطاف الإدخال والترك المعلمة الثانية الاختيارية: وظيفة رد الاتصال. عندما يحتوي توقيع وظيفتك على معلمة ثانية ، فهذا يعني أنك تتوقع استخدام رد الاتصال هذا لإكمال عملية الانتقال بأكملها بشكل صريح ، بدلاً من الاعتماد على VUE للكشف تلقائيًا من أحداث الانتقال من انتقالات CSS. على سبيل المثال:
أدخل: الدالة (el) {// لا معلمة ثانية // يتم تحديد نهاية تأثير الانتقال بواسطة الحدث النهائي الانتقالي CSS}مقابل
أدخل: الدالة (EL ، تم) {// هناك معلمة ثانية // يجب تحديد نهاية تأثير الانتقال من خلال استدعاء `done`} يدويًا}عندما تؤدي عناصر متعددة تأثيرات انتقالية في نفس الوقت ، ستقوم Vue.js بإجراء عملية لضمان تشغيل التصميم القسري مرة واحدة فقط.
الرسوم المتحركة CSS
يتم استدعاء الرسوم المتحركة CSS بنفس طريقة تأثير انتقال CSS. الفرق هو أنه في الرسوم المتحركة ، لم تتم إزالة فئة .V-Enter فور إدراج العقدة في DOM ، ولكن تتم إزالتها عند تشغيل حدث الرسوم المتحركة.
مثال: (تم حذف بادئة التوافق)
<span v-show = "show" v-transition = "bounce"> انظر إلي! </span>
.bounce-enter {الرسوم المتحركة: Bounce-in .5S ؛}. Bounce-Leave {الرسوم المتحركة: 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 فقط ، يجب على السنانير الإدخال والمغادرة استخدام رد الاتصال الذي تم القيام به ، وإلا سيتم استدعاؤها بشكل متزامن وسوف ينتهي الانتقال على الفور. في المثال التالي ، نستخدم jQuery لتسجيل تأثير انتقال JavaScript مخصص:
vue.transition ('fade' ، {inter: function (el ، done) {// تم إدراج العنصر في DOM في هذا الوقت // call يتم عند الانتهاء من الرسوم المتحركة $ (el) .css ('opatited' ، 0) .antimer ({{{elsity: 1} ، 1000 ، ext) ، {// على غرار خطاف enter $ (el) .animate ({opatity: 0} ، 1000 ، ext)} ، leaveCancelled: function (el) {$ (el) .stop ()}})بعد تحديد هذا الانتقال ، يمكنك تسميته عن طريق تحديد المعرف المقابل لنقل V:
<p v-transition = "fade"> </p>
إذا كان هناك عنصر يستخدم فقط تأثيرات انتقالية JavaScript يتأثر بقواعد الانتقال/الرسوم المتحركة الأخرى ، فقد يتداخل ذلك مع آلية الكشف عن انتقال VUE. عند مواجهة هذا الموقف ، يمكنك حظر اكتشاف CSS عن طريق إضافة CSS: خطأ إلى كائن الخطاف الخاص بك.
تأثير الانتقال تدريجيا
عند استخدام كل من النقل V و V-Repeat ، يمكننا إضافة تأثير انتقالي تدريجي إلى عنصر القائمة. تحتاج فقط إلى إضافة ميزات Stagger أو Enter-Stager أو Leaving Stager (بالميلي ثانية):
<div v-repeat = "list" v-transition stagger = "100"> </div>
أو يمكنك أيضًا توفير خطافات Stagger أو EnterStagger أو eavestgger للتحكم الدقيق الدقيق:
vue.transition ('stagger' ، {stagger: function (index) {// إضافة 50 مللي ثانية تأخير إلى كل عنصر انتقالي ، // ولكن الحد الأقصى للتأخير هو 300 مللي ثانية return math.min (300 ، index * 50)}})مثال:
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.