تقدم Vue.js الوظائف والتحولات (ترجمها هاجيم ياماساكي فوكيليتش)

مرحبا يا هبر! قررت أن أبدأ نشاطي بترجمة المقالات إلى اللغة الروسية ، والتي استفدت منها بنفسي بشكل كبير. آمل أن تأتي في متناول اليدين. لاحظت أنني حاولت ترجمة الأدب ، وليس حرفيًا.


بادئ ذي بدء ، أعرض ترجمة مقالة "Vue.js تجعل الوظائف والتحولات" لهاجيم ياماساكي فوكيليتش.

Vue.js تقديم وظائف والتحولات

وثائق Vue.js المتعلقة بوظائف التجميع ضعيفة. بالنسبة للمستخدمين الذين يستخدمون JSX مع وظائف التجسيد ، يمكن أن يحدث هذا مشاكل. في هذه المقالة ، سننظر في كيفية إنشاء انتقالات في هذا السيناريو المحدد.

أستخدم JSX في الأمثلة ، لكن كل هذا يعمل مع وظائف تقديم جافا سكريبت البسيطة ، نظرًا لأن JSX هو مجرد سكر نحوي لمكالمات h (). إذا كنت تريد معرفة المزيد حول هذا الموضوع ، تحقق من هذه المقالة .

كيف تعمل التحولات بشكل عام

إن جوهر التحولات هو أن لديك مكون انتقال مدمج يعين الفئات لعناصر مثبتة (إدخال) أو إلغاء تحميل (إجازة).

الرقص Pikabu

فارق بسيط: كيفية تحديد مكان التثبيت أو تفكيك العناصر. يمكن حل هذه المشكلة بعدة طرق.

يمكنك استخدام عامل التشغيل الثلاثي لتنفيذ مظهر / اختفاء عنصر:

render(h) { <transition> {this.showDiv ? <div class="myDiv">Hello</div> : null} </transition> } 

أو لاستبدال عنصر بآخر:

 render(h) { <transition> {this.showOneOrTheOther ? <div class="myDiv">Hello</div> : <div class="myOtherDiv">Hello again</div> } </transition> } 

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

سيكون من الأفضل إذا كنت تستخدم المفتاح عند استبدال العناصر:

 render(h) { <transition> {this.showOneOrTheOther ? <div key="myDiv" class="myDiv">Hello</div> : <div key="myOtherDiv" class="myOtherDiv">Hello again</div> } </transition> } 

إذا كان هناك مفتاح ، فإن عنصرين يتغيران تمامًا (يتم تفكيك العنصر القديم ، ويتم تثبيت العنصر الجديد في مكانه) ، في حين أن المفاتيح مختلفة.

وبالمثل ، إذا كنت ترغب في تبديل عنصر أو عنصر من عنصر آخر من نفس العنصر / العنصر:

 render(h) { <transition> <div key={this.subcomponentKey}> <MyComponent /> </div> </transition> } 

في المثال أعلاه ، تقوم طريقة this.subcomponentKey بحساب المفتاح المقابل لمكون MyComponent بطريقة أو بأخرى.

الاختلافات الرئيسية

بينما نتحدث عن المفاتيح ، تذكر أن العناصر / المكونات يتم عرضها دائمًا تمامًا عند تغيير المفتاح. من ناحية أخرى ، طالما ظل المفتاح كما هو ، فإن العناصر / المكونات لا تتغير.

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

مضيفا الرسوم المتحركة

الآن بعد أن عرفنا كيف نجعل عناصرنا تختفي وتعود ، حان الوقت للعمل على الرسوم المتحركة.

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

 // my.css .base { transition: transform 1s; } .out { transform: translateX(-100vw); } 

أضف الآن هذه الفئات إلى الكود:

 render(h) { <transition enter-class="out" leave-to-class="out"> {this.someProp ? <div class="base">Hello</div> : null} </transition> } 

تم توضيح هذه الفئات (دخول الصفوف وترك الصفوف) في الوثائق . اقرأ عنهم هناك.

تعمل فئة الإدخال كمستودع للأنماط التي يتم تطبيقها فورًا بعد تركيب عنصر. بعد هذا مباشرة ، يتم حذف الفصل. نضيف انتقالات لإنشاء رسم متحرك بين وقت استخدام فئة الإدخال والوقت الذي لا يكون فيه هناك (عند استخدام فئة .base فقط).

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

في مثالنا ، استخدمنا نفس الفئة .out للدخول والخروج ، لكن يمكننا استخدام فئات مختلفة لحدثين.

الخاتمة

نأمل الآن أن تفهم المفاهيم الأساسية للتحولات Vue.js عند استخدامها في وظائف التقديم ومع JSX. ومع ذلك ، تقدم انتقالات Vue.js ميزات أكثر من ذلك بكثير ، مثل القدرة على الاتصال بأحداث الانتقال باستخدام JavaScript ، وبالتالي ، حتى القيام ببعض الأشياء غير المتعلقة بالرسوم المتحركة (نوع من مصائد دورة حياة مثل). سوف أنهي المقال هنا وأترك ​​التجارب للقراء الأعزاء.

القرصنة سعيدة!