क्या किसी भी घटना को मिटाने के लिए किसी तत्व द्वारा सीएसएस 3 संक्रमण शुरू कर दिया गया है या समाप्त हो गया है?
क्या किसी भी घटना को मिटाने के लिए किसी तत्व द्वारा सीएसएस 3 संक्रमण शुरू कर दिया गया है या समाप्त हो गया है?
जवाबों:
एक सीएसएस संक्रमण के पूरा होने के एक इसी डोम घटना उत्पन्न करता है। एक घटना को प्रत्येक संपत्ति के लिए निकाल दिया जाता है जो संक्रमण से गुजरती है। यह एक कंटेंट डेवेलपर को ऐसी गतिविधियाँ करने की अनुमति देता है जो एक संक्रमण के पूरा होने के साथ सिंक्रनाइज़ होती हैं।
यह निर्धारित करने के लिए कि एक संक्रमण कब पूरा होता है, एक संक्रमण के अंत में भेजे जाने वाले DOM इवेंट के लिए एक जावास्क्रिप्ट ईवेंट श्रोता फ़ंक्शन सेट करें। इवेंट WebKitTransitionEvent का एक उदाहरण है, और इसका प्रकार है
webkitTransitionEnd।
box.addEventListener( 'webkitTransitionEnd',
function( event ) { alert( "Finished transition!" ); }, false );
एक एकल ईवेंट है जिसे संक्रमण पूर्ण होने पर निकाल दिया जाता है। फ़ायरफ़ॉक्स में, घटना
transitionendओपेरा मेंoTransitionEnd, और WebKit में हैwebkitTransitionEnd।
एक प्रकार का संक्रमण घटना उपलब्ध है।
oTransitionEndघटना संक्रमण के पूरा होने पर होता है।
transitionendघटना संक्रमण के पूरा होने पर होता है। यदि संक्रमण पूरा होने से पहले हटा दिया जाता है, तो घटना में आग नहीं लगेगी।
स्टैक ओवरफ्लो: मैं ब्राउज़रों में सीएसएस 3 संक्रमण कार्यों को कैसे सामान्य कर सकता हूं?
अपडेट करें
सभी आधुनिक ब्राउज़र अब उपसर्ग घटना का समर्थन करते हैं:
element.addEventListener('transitionend', callback, false);
https://caniuse.com/#feat=css-transitions
मैं पीट द्वारा दिए गए दृष्टिकोण का उपयोग कर रहा था, हालांकि मैंने अब निम्नलिखित का उपयोग करना शुरू कर दिया है
$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',
function() {
//do something
});
वैकल्पिक रूप से यदि आप बूटस्ट्रैप का उपयोग करते हैं तो आप बस कर सकते हैं
$(".myClass").one($.support.transition.end,
function() {
//do something
});
यह क्योंकि वे बूटस्ट्रैप में निम्नलिखित शामिल हैं। 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 ( ._.)
}
$(function () {
$.support.transition = transitionEnd()
})
}(jQuery);
ध्यान दें कि उनमें एक emulateTransitionEnd फ़ंक्शन भी शामिल है, जिसे कॉलबैक हमेशा सुनिश्चित करने के लिए आवश्यक हो सकता है।
// 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
}
ध्यान रखें कि कभी-कभी यह घटना आग नहीं लगाती है, आमतौर पर इस मामले में जब गुण नहीं बदलते हैं या पेंट को ट्रिगर नहीं किया जाता है। यह सुनिश्चित करने के लिए कि हम हमेशा कॉलबैक प्राप्त करते हैं, चलो एक टाइमआउट सेट करते हैं जो घटना को मैन्युअल रूप से ट्रिगर करेगा।
ओपेरा 12 में जब आप सादे जावास्क्रिप्ट का उपयोग करके बांधते हैं, तो 'oTransitionEnd' काम करेगा:
document.addEventListener("oTransitionEnd", function(){
alert("Transition Ended");
});
हालाँकि, यदि आप jQuery के माध्यम से बाँधते हैं, तो आपको 'ओट्रांसमेंटेंड' का उपयोग करना होगा
$(document).bind("otransitionend", function(){
alert("Transition Ended");
});
यदि आप मॉडर्निज़र या बूटस्ट्रैप-ट्रांज़िशन का उपयोग कर रहे हैं। तो क्या आप बस एक बदलाव कर सकते हैं:
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd otransitionend',
'msTransition' : 'MSTransitionEnd',
'transition' : 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];
आप कुछ जानकारी यहाँ भी पा सकते हैं http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/
बस मनोरंजन के लिए, यह मत करो!
$.fn.transitiondone = function () {
return this.each(function () {
var $this = $(this);
setTimeout(function () {
$this.trigger('transitiondone');
}, (parseFloat($this.css('transitionDelay')) + parseFloat($this.css('transitionDuration'))) * 1000);
});
};
$('div').on('mousedown', function (e) {
$(this).addClass('bounce').transitiondone();
});
$('div').on('transitiondone', function () {
$(this).removeClass('bounce');
});
यदि आप केवल किसी भी जेएस फ्रेमवर्क का उपयोग किए बिना केवल एक एकल संक्रमण अंत का पता लगाना चाहते हैं, तो यहां थोड़ी सुविधाजनक उपयोगिता फ़ंक्शन है:
function once = function(object,event,callback){
var handle={};
var eventNames=event.split(" ");
var cbWrapper=function(){
eventNames.forEach(function(e){
object.removeEventListener(e,cbWrapper, false );
});
callback.apply(this,arguments);
};
eventNames.forEach(function(e){
object.addEventListener(e,cbWrapper,false);
});
handle.cancel=function(){
eventNames.forEach(function(e){
object.removeEventListener(e,cbWrapper, false );
});
};
return handle;
};
उपयोग:
var handler = once(document.querySelector('#myElement'), 'transitionend', function(){
//do something
});
फिर यदि आप किसी बिंदु पर रद्द करना चाहते हैं, तब भी आप इसे कर सकते हैं
handler.cancel();यह अन्य घटना usages के लिए अच्छा है :)