কোনও CSS3 রূপান্তর শুরু হয়েছে বা শেষ হয়েছে কিনা তা পরীক্ষা করার জন্য কোনও উপাদান দ্বারা চালিত কোনও ইভেন্ট রয়েছে?
কোনও CSS3 রূপান্তর শুরু হয়েছে বা শেষ হয়েছে কিনা তা পরীক্ষা করার জন্য কোনও উপাদান দ্বারা চালিত কোনও ইভেন্ট রয়েছে?
উত্তর:
সিএসএস ট্রানজিশনের সমাপ্তি একটি संबंधित ডিওএম ইভেন্ট উত্পন্ন করে। একটি সংক্রমণের মধ্য দিয়ে যাওয়া প্রতিটি সম্পত্তির জন্য একটি ইভেন্ট বরখাস্ত করা হয়। এটি কোনও সামগ্রীর বিকাশকারীকে এমন ক্রিয়া সম্পাদন করতে সহায়তা করে যা কোনও রূপান্তর সমাপ্তির সাথে সিঙ্ক্রোনাইজ করে।
কোনও রূপান্তর কখন শেষ হয় তা নির্ধারণ করতে, কোনও রূপান্তর শেষে প্রেরিত ডম ইভেন্টের জন্য একটি জাভাস্ক্রিপ্ট ইভেন্ট শ্রোতার ফাংশন সেট করুন। ইভেন্টটি ওয়েবকিট ট্রানসিশন ইভেন্টের একটি উদাহরণ এবং এর ধরণ
webkitTransitionEnd।
box.addEventListener( 'webkitTransitionEnd',
function( event ) { alert( "Finished transition!" ); }, false );ট্রানজিশন সম্পূর্ণ হওয়ার পরে একটি একক ইভেন্ট ফায়ার হয়। ফায়ারফক্সে, ইভেন্টটি
transitionendঅপেরাoTransitionEnd, এবং ওয়েবকিটে রয়েছেwebkitTransitionEnd।
এক ধরণের রূপান্তর ইভেন্ট উপলব্ধ।
oTransitionEndঘটনা ট্রানজিশন সমাপ্তির ঘটে।
transitionendঘটনা ট্রানজিশন সমাপ্তির ঘটে। যদি সম্পন্ন হওয়ার আগেই স্থানান্তরটি সরিয়ে ফেলা হয়, ইভেন্টটি চালিত হবে না।
স্ট্যাক ওভারফ্লো: ব্রাউজারগুলিতে আমি কীভাবে CSS3 স্থানান্তর ফাংশনগুলিকে সাধারণ করব?
হালনাগাদ
সমস্ত আধুনিক ব্রাউজার এখন অপ্রকাশিত ইভেন্টকে সমর্থন করে:
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
});এটি বুটস্ট্র্যাপ.জেএস-এ নিম্নলিখিতগুলি অন্তর্ভুক্ত করার কারণে
+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);মনে রাখবেন যে এগুলিতে একটি এমুলেট ট্রান্সিশনএন্ড ফাংশন অন্তর্ভুক্ত রয়েছে যা কলব্যাক সবসময় ঘটে তা নিশ্চিত করার জন্য প্রয়োজন হতে পারে।
// 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 এর সাথে আবদ্ধ হলে আপনার 'otransitionend' ব্যবহার করা উচিত
$(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();অন্যান্য ইভেন্ট ব্যবহারের জন্যও এটি ভাল :)