1. الانتقال (مرشح)
كمكون أساسي مدعوم ، يتم الرجوع إليه عدة مرات بواسطة مكونات أخرى. تنفيذ القدرة على دعم الانتقال وفقًا للمتصفح ، ثم ربط الحدث النهائي للرسوم المتحركة ؛
أولاً: إنشاء عنصر ؛
ثم: تكرار نظرة عامة على اسم الرسوم المتحركة الانتقالية التي يدعمها هذا العنصر
مهارة تنفيذ الانتقال هي بشكل أساسي إعادة كتابة كائن حدث jQuery ، والرمز كما يلي:
$ (function () {$ .support.transition = transitionEnd () if (! $. support.transition) return $ .event.special.bsTransitionEnd = {bindType: $ .support.transition.end.end ، devateType: $ .Support.Transition.end ، banded: function (e) e.handleobj.handler.apply (هذا ، وسيطات)}}}})2.
1. الهدف: تشير المعلمة إلى عقدة مرجع تحديد المواقع (يجب أن تكون كائن الحاوية الأصل التي تنشئ شريط التمرير) ، والإعداد الافتراضي هو نافذة
2. سيتم استخدام القيم العلوية والسفلية التي يتم تعيينها بواسطة إزاحة البيانات فقط لحساب التعبيرات ولن يتم ضبطها في CSS.
3. ثلاثة أنواع من أنماط تحديد المواقع:
3.1. Affix-Top: النمط الذي سيتم إضافته عند الوصول إلى الجزء العلوي من الصفحة
3.2. الملحق: أنماط سيتم إضافتها في منتصف الصفحة
3.3. أفيكس القاع: الأنماط التي سيتم إضافتها في أسفل الصفحة
4. معالجة صيغة:
4.1. الأعلى: ارتفاع شريط التمرير لـ traget (scrolltop) <المسافة من الموضع العلوي للعنصر (Offsettop) (الحكم الأول)
4.1.1. تم تعيين Scrolltop على: أعلى وضع العنصر نفسه (يتم وضع المسافة من النقطة الأصلية للعنصر حاليًا من المستند) (وليس المرة الأولى)
4.2. getPinnedOffset: احصل على الجزء العلوي الذي يلتصق على شريط التمرير الهدف TOP Element Top Target
4.3. أسفل: إذا كان العنصر العصي هو المرة الأولى التي يتم فيها وضع القاع ، فإن القاع هو ارتفاع شريط التمرير الهدف + ارتفاع العنصر الهدف> ارتفاع ارتفاع شريط تمرير المستند بأكمله يلتصق بالعنصر من أسفل
4.3.1. إذا لم تكن هذه هي المرة الأولى ، فإن تحديد المواقع السفلية
1) إذا لم تكن Offsettop (المسافة من الموضع العلوي للعنصر) فارغة ، فإن الجزء العلوي من الهدف + قيمة getPinnedOffset> قيمة العنصر اللزج الذي تم وضعه حاليًا في الأعلى
2) إذا كان Offsettop فارغًا ، فإن الجزء العلوي من الهدف + ارتفاع عنصر الهدف> ارتفاع ارتفاع المستند إلى أسفل
4. الجزء العلوي الوحيد الذي يمكن أن يغير العنصر الملتصق هو: ارتفاع المستند - ارتفاع العنصر العصي - ارتفاع العنصر العصي من أسفل
5. حيث تكمن الحفرة:
1) عند استخدام أعلى وأسفل معًا ، ستحدث النزاعات ، الأسباب:
Affix-Bottom ، أي عند الوصول إلى أسفل الصفحة ، يستخدم Bootstrap إزاحة لتعيين القيمة العليا ، ويضيف الموضع: القيمة النسبية للعنصر ، مما لا ينتج عنه أي تأثير عند التمرير لأسفل مرة أخرى بعد العودة إلى أعلى الصفحة.
السبب: ستجاوز المجموعة النسبية للأساليب الموجودة في الخط الأنماط الثابتة المحددة في الفصل
6. ملخص
1) إنه جيد في الموقف العلوي ، وتحتاج إلى إضافة التحكم اليدوي في الوضع السفلي
2) عند تطبيق التحكم في اللصقة ، على الأقل أعد كتابة نمط اللصفة بنفسك للتحكم في وضع الشريط اللزج.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوع رائع لك: Bootstrap التعلم التعليمي
تم تجميع هذه السلسلة من البرامج التعليمية في: Bootstrap Basic Prosorials Secorts ، مرحبًا بك في النقر للتعلم.
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.