هذه المقالة عبارة عن شرح أكثر شمولاً وتفصيلاً تم تجميعه بواسطة المحرر مع المستندات الرسمية ، مع المزيد من الرموز الأكثر اكتمالا.
هذه المقالة تأتي من الوثيقة الرسمية:
http://cn.vuejs.org/guide/transitions.html
دعونا نلقي نظرة على المعرفة ذات الصلة بالرسوم المتحركة الانتقالية:
① تعريف الرسوم المتحركة الانتقالية ؛
ببساطة ، هذا هو الشكل الذي سيختفي ويظهر عندما تختفي الوحدة ويظهر ؛
إذا كنت ترغب في استخدام الرسوم المتحركة الانتقالية ، فأضف سمات إلى العلامة:
Transition = "اسم الرسوم المتحركة الانتقالية"
على سبيل المثال:
<div v-if = "box_1" transition = "mytran"> 1 </viv>
إليكم Mytran ، وهو اسم الرسوم المتحركة الانتقالية. إنه اسم الفصل. ستضيف الرسوم المتحركة ملحقات مختلفة متعددة بناءً على هذا الاسم (انظر أدناه للحصول على التفاصيل)
② أحداث ربط الرسوم المتحركة الانتقالية:
【1】 V-if
【2】 عرض V.
【3】 v-for (يتم تشغيله فقط عند إدخال وحذف ، يمكنك كتابته بنفسك ، أو استخدام المكون الإضافي القائم على أساس VUE) ؛
اكتب لنفسك على سبيل المثال:
<div v-for = "i in stems" transition = "mytran"> {{i}} </div>طريقة كتابة الرسوم المتحركة موجزة (انظر أدناه)
【4】 المكونات الديناميكية ؛
[5] على عقدة الجذر للمكون ، ويتم تشغيله بواسطة طريقة DOM مثيل VUE (على سبيل المثال: VM. $ appendto (EL)). ربما ، أضف المكون إلى عقدة الجذر.
الرسوم المتحركة ③CSS:
[1] أولاً ، تحتاج إلى الحصول على سمة الانتقال ثم الحصول على قيمتها ؛
【2】 ثانياً ، هناك ثلاثة أسماء فئة في CSS مع القيم ، وهي:
على افتراض أن قيمة الانتقال هي Mytran ، اسم الفصل هو
يوضح
.mytran-transition
في حالة الرسوم المتحركة ، يتم وضع سمة انتقال CSS هنا ، والفئة التي يمثلها موجودة دائمًا على DOM ؛
بالإضافة إلى ذلك ، سيتجاوز النمط هنا النمط الذي يوفره الفئة الافتراضية للتسمية
.mytran-enter
عند الدخول ، يتوسع المكون من حالة CSS هذه إلى حالة CSS الحالية ، وهذه الفئة لديها فقط الإطار الأول.
. mytran-leave
عند الخروج ، يعيد المكون إلى هذه الحالة من حالة CSS الأصلية. يسري هذا الفصل من بداية الخروج ويتم حذفه في نهاية الخروج.
كرمز:
<style> .box {width: 100px ؛ الارتفاع: 100px ؛ الحدود: 1 بكسل صلب أحمر. العرض: كتلة مضمنة. } /* هذا يحدد موقف الرسوم المتحركة والأسلوب عند وجوده. سيتجاوز هذا النمط النمط في الفصل*/ .mytran-transition {Transition: All 0.3s Ease ؛ خلفية اللون: Greenyellow ؛ } /* .mytran-enter يحدد حالة البدء من الإدخال* / /* .mytran-leave تحدد حالة الانطلاق النهائية* / .mytran-enter ، .mytran-lave {height: 0 ؛ العرض: 0 ؛ } </style> <div id = "app"> <button @click = "change"> انقر للاختباء وإظهار عشوائيًا </button> <br/> <div v-if = "box_1" transition = "mytran"> 1 </viv> <div v-if = "box_2" transition = "mytran <script> var vm = new vue ({el: '#app' ، البيانات: {box_1: true ، box_2: true ، box_3: true} ، الطرق: {تغيير: function () {for (var i = 1 ؛ i <4 ؛ i ++) {this ['box_'+i] = math.random ()> 0.5؟ 300) ؛ </script>سوف النقر بشكل عشوائي جعل 3 كتل إخفاء أو عرض ؛
④javaScript Hook:
[1] ببساطة ، هذا لا يؤثر على الرسوم المتحركة CSS (لا تزال التغييرات في تلك الفئات الثلاث) ؛
[2] يستخدم هذا بشكل أساسي للاستيلاء على الدخول والرحيل أربع لحظات لكل منهما ، ويستخدم للقيام بأشياء معينة ؛
【3】 هذه اللحظات الثماني هي:
Enter: Quartenter (قبل الدخول) ، أدخل (قبل إدخال الرسوم المتحركة فقط) ، بعد المقررة (قبل إدخال نهايات الرسوم المتحركة) ، Entercancelled (قبل أن يتم مقاطعة الإدخال) ؛
الخروج: BeForeleave (قبل الخروج) ، اترك (بدأت الرسوم المتحركة للخروج للتو) ، AfterLeave (انتهت الرسوم المتحركة للخروج) ، LeaveCancelled (تم مقاطعة المخرج) ؛
[4] سيتم استعادة تعديل DOM في بعض الحالات. على سبيل المثال ، سيعمل تعديل خاصية TextContent الخاصة بـ DOM في خطوة الإجازة على استعادة الحالة الأصلية عند إعادة إدخال DOM ؛ ولكن إذا تم تعديلها في خطوة Enter ، فلن يتم استعادتها.
كرمز:
Vue.Transition ('mytran' ، {stileenter: function (el) {// قبل إدخال console.log ("أدخل وقت بدء الرسوم المتحركة:" + date date () } beforeleave: el)⑤ اسم فئة الانتقال العمودي:
سبب تخصيص اسم فئة الانتقال هو أننا لا نستطيع أن نطلب أن يتم كتابة نمط كل الرسوم المتحركة CSS وفقًا لطريقة الكتابة القياسية Vuejs (مثل تنزيل رمز كتبه الآخرون) ؛
ملاحظة: يجب أن يتم التعريف قبل إعلان مثيل VUE ذي الصلة.
بادئ ذي بدء ، أوصي بمجموعة من الرسوم المتحركة التي أوصى بها برنامج Vuejs الرسمي: (هذا ليس رابط تنزيل ، تحتاج إلى فتحه للعثور على رابط التنزيل قبل أن تتمكن من تنزيله)
https://daneden.github.io/animate.css/
بعد التنزيل ، استيراد ملف CSS هذا وبدء تخصيص الرسوم المتحركة ؛
<div id = "app"> <button @click = "change"> انقر للاختباء وإظهار عشوائيًا </button> <br/> <div v-if = "box" transition = "bounce"> 1 </viv> </viv> <script> vue.trantition ("bounce" ، {interclass: "boundinleft '، leaveclass:' #App '، البيانات: {box: true} ، الأساليب: {تغيير: function () {this.box =! this.box ؛ </script>يشرح:
【1】 العلامات الحيوانية مطلوبة للحصول على فئة الرسوم المتحركة ؛
【2】 المعطف و leaveclass يعادلون XXX-Enter و XXX-Leave السابق ؛
【3】 التأثير هو الوميض من اليسار وميض من اليمين.
[4] تحتاج إلى تعيين رسوم متحركة قبل إعلان مثيل VUE ، وإلا فإنها ستكون غير صالحة ؛
⑥ استخدام الرسوم المتحركة
في Vuejs ، الرسوم المتحركة والرسوم المتحركة الانتقالية مختلفة.
ببساطة ، يتم تقسيم الرسوم المتحركة الانتقالية إلى ثلاث خطوات: فئة دائمة ، فئة يتم تشغيلها عند الدخول ، والطبقة التي يتم تشغيلها عند الخروج ؛ فقط فئة دائمة لديها سمات انتقالية للرسوم المتحركة ، والخطوتين الأخريين لا تحتوي إلا على حالة CSS ؛
تنقسم الرسوم المتحركة إلى خطوتين: يتم تشغيل الفصل عند الدخول والفئة التي تم تشغيلها عند الخروج. بالطبع ، توجد فئة XXX-Transition في DOM (يمكن استخدام هذه الفئة لتعيين أصل الرسوم المتحركة ، أو ببساطة لم يتم تعيين هذه الفئة) ؛
في الرسوم المتحركة ، يجب أن يكون للفصول الدراسية عند الدخول والخروج تأثيرات على الرسوم المتحركة ، على سبيل المثال:
keyframes fat {0 ٪ {width: 100px} 50 ٪ {width: 200px} 100 ٪ {width: 100px}} .fat-leave ، .fat-enter {الرسوم المتحركة: الدهون 1S ؛ }عند الدخول والخروج ، تكون أسماء الفئة التي تم تنفيذها هي نفس التحولات ، وتكون في أشكال XXX-Leave و XXX-ENTER ؛
بالطبع ، يمكنك أيضًا تخصيص اسم الفصل.
نموذج الرمز:
<style> .box {width: 100px ؛ الارتفاع: 100px ؛ الحدود: 1 بكسل صلب أحمر. العرض: كتلة مضمنة. } @keyframes fat {0 ٪ {width: 100px} 50 ٪ {width: 200px} 100 ٪ {width: 100px}} .fat-leave ، .fat-enter {الرسوم المتحركة: الدهون 1S ؛ } </style> <div id = "app"> <button @click = "change"> انقر لإخفاء وعرض عشوائيًا </button> <br/> <div v-if = "box" transition = "fat"> 1 </viv> </viv> <cript> vm vm = new vue ({el: }) ؛ </script>تأثير:
تختفي: كن أوسع أولاً ، ثم استرداد ، ثم تختفي ؛
أدخل: تظهر ، اتسع ، استرداد ، البقاء ؛
أنا هنا كسول وأشترك في نفس تأثير الرسوم المتحركة.
إضافة إلى هذا ، هناك
[1] أعلن صراحة نوع الرسوم المتحركة (إذا كانت الرسوم المتحركة قد انتقالية والرسوم المتحركة في نفس الوقت ، وسيتم تنفيذ أحدها في مواقف مختلفة) ؛
[2] شرح مفصل لعملية الانتقال (ترتيب تنفيذ خطاف JS وتنفيذ CSS عند تشغيل الرسوم المتحركة) ؛
[3] الرسوم المتحركة CSS (أي الرسوم المتحركة ، كما هو موضح أعلاه ، تم حذفها في التفاصيل) ؛
[4] انتقال JavaScript (وليس خطاف JS ، يعني الخطاف أنه سيتم استدعاء وظيفة معينة في مرحلة معينة ، ولكن هذا الخطاف لا علاقة له بالرسوم المتحركة) ، واستخدام JavaScript للتحكم في الرسوم المتحركة ، مثل طريقة تحريك JQuery ؛
【5】 انتقال تدريجي يستخدمه V-for ؛
نظرًا لأنه غير متوفر في الوقت الحالي ، فقد تم حذفه. إذا كنت بحاجة إلى مشاهدته ، يرجى فتح الاتصال:
http://cn.vuejs.org/guide/transitions.html
ما سبق هو تحليل شامل لحالة الرسوم المتحركة لانتقال Vuejs من Vuejs السابعة التي قدمها لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!