رد الاتصال على انتقال CSS
-
21-09-2019 - |
سؤال
هل من الممكن الحصول على إشعار (مثل رد الاتصال) عند الانتهاء من انتقال CSS؟
المحلول
أعلم أن Safari ينفذ أ WebKitTransitionEnd رد الاتصال الذي يمكنك إرفاقه مباشرة بالعنصر مع الانتقال.
مثالهم (إعادة تهيئة خطوط متعددة):
box.addEventListener(
'webkitTransitionEnd',
function( event ) {
alert( "Finished transition!" );
}, false );
نصائح أخرى
نعم ، إذا تم دعم مثل هذه الأشياء من قبل المتصفح ، فسيتم تشغيل الحدث عند اكتمال الانتقال. الحدث الفعلي ومع ذلك ، يختلف بين المتصفحات:
- استخدام متصفحات WebKit (Chrome ، Safari)
webkitTransitionEnd
- يستخدم Firefox
transitionend
- IE9+ الاستخدامات
msTransitionEnd
- يستخدم الأوبرا
oTransitionEnd
ومع ذلك يجب أن تدرك ذلك webkitTransitionEnd
لا تطلق النار دائما! لقد جعلني هذا عدة مرات ، ويبدو أنه يحدث إذا لم يكن للرسوم المتحركة أي تأثير على العنصر. للتغلب على هذا ، من المنطقي استخدام مهلة لإطلاق معالج الحدث في حالة عدم تشغيله كما هو متوقع. يتوفر منشور مدونة حول هذه المشكلة هنا: http://www.cuppadev.co.uk/the-trouble-with-css-transitions/ <- 500 خطأ خادم داخلي
مع وضع ذلك في الاعتبار ، أميل إلى استخدام هذا الحدث في جزء كبير من التعليمات البرمجية التي تبدو مثل هذا:
var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd"..
var elemToAnimate = ... //the thing you want to animate..
var done = false;
var transitionEnded = function(){
done = true;
//do your transition finished stuff..
elemToAnimate.removeEventListener(transitionEndEventName,
transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName,
transitionEnded, false);
//animation triggering code here..
//ensure tidy up if event doesn't fire..
setTimeout(function(){
if(!done){
console.log("timeout needed to call transition ended..");
transitionEnded();
}
}, XXX); //note: XXX should be the time required for the
//animation to complete plus a grace period (e.g. 10ms)
ملاحظة: للحصول على اسم نهاية الحدث الانتقالي ، يمكنك استخدام الطريقة المنشورة كإجابة في:كيف أقوم بتطبيع وظائف انتقال CSS3 عبر المتصفحات؟.
ملاحظة: يرتبط هذا السؤال أيضًا بـ: - أحداث الانتقال CSS3
أنا أستخدم الكود التالي ، هو أبسط بكثير من محاولة اكتشاف الحدث النهائي المحدد الذي يستخدمه المتصفح.
$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',
function() {
//do something
});
بدلاً من ذلك ، إذا كنت تستخدم bootstrap ، فيمكنك القيام ببساطة
$(".myClass").one($.support.transition.end,
function() {
//do something
});
هذا لأنها تتضمن ما يلي في bootstrap.js
+function ($) {
'use strict';
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
// ============================================================
function transitionEnd() {
var el = document.createElement('bootstrap')
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd otransitionend',
'transition' : 'transitionend'
}
for (var name in transEndEventNames) {
if (el.style[name] !== undefined) {
return { end: transEndEventNames[name] }
}
}
return false // explicit for ie8 ( ._.)
}
// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
var called = false, $el = this
$(this).one($.support.transition.end, function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback, duration)
return this
}
$(function () {
$.support.transition = transitionEnd()
})
}(jQuery);
ال jquery.transit البرنامج المساعد, ، المكون الإضافي لتحويلات CSS3 والتحولات ، يمكنه الاتصال بالرسوم المتحركة CSS من البرنامج النصي ومنحك رد اتصال.
يمكن تحقيق ذلك بسهولة مع transitionend
الحدث انظر الوثائق هنامثال بسيط:
document.getElementById("button").addEventListener("transitionend", myEndFunction);
function myEndFunction() {
this.innerHTML = "Transition event ended";
}
#button {transition: top 2s; position: relative; top: 0;}
<button id="button" onclick="this.style.top = '55px';">Click me to start animation</button>