উত্তর:
আমি জানি যে সাফারি একটি ওয়েবকিট ট্রান্সিশনএন্ড কলব্যাক প্রয়োগ করে যা আপনি রূপান্তরের মাধ্যমে উপাদানটির সাথে সরাসরি সংযুক্ত করতে পারেন।
তাদের উদাহরণ (একাধিক লাইনে পুনরায় ফর্ম্যাট করা):
box.addEventListener(
'webkitTransitionEnd',
function( event ) {
alert( "Finished transition!" );
}, false );
thisকলব্যাকের অভ্যন্তরের উপাদানটির সাথে কিছু করার আছে। তবে এটির প্রয়োজনীয় প্যারামিটার, সুতরাং এক্ষেত্রে এটি কেবল প্রয়োজনীয়তা পূরণ করে।
useCaptureMode। যখন কোনও ইভেন্ট ঘটে তখন দুটি ধাপ হয় - প্রথম পর্যায়ে ক্যাপচার মোড, দ্বিতীয়টি বুদ্বুদ মোড। ক্যাপচার মোডে, ইভেন্টটি শরীরের উপাদান থেকে নির্দিষ্ট উপাদানটিতে নেমে আসে। এটি পরে বুদ্বুদ মোডে প্রবেশ করে, যেখানে এটি বিপরীত হয়। এই চূড়ান্ত মিথ্যা পরম উল্লেখ করে যে আপনি ইভেন্ট শ্রোতাকে বুদ্বুদ মোডে ঘটতে চান। এর একটি ব্যবহার হল ইভেন্ট হ্যান্ডলারগুলি বুদ্বুদ মোডের প্রয়োজন হওয়ার ঠিক আগে সংযুক্ত করা। =) 37signals.com/svn/posts/...
হ্যাঁ, যদি এই জাতীয় জিনিসগুলি ব্রাউজার দ্বারা সমর্থিত হয়, তবে রূপান্তর সম্পূর্ণ হওয়ার পরে একটি ইভেন্ট ট্রিগার করা হয়। আসল ঘটনাটি ব্রাউজারগুলির মধ্যে পৃথক:
webkitTransitionEndtransitionendmsTransitionEndoTransitionEndতবে আপনার সচেতন হওয়া উচিত যে webkitTransitionEndসর্বদা গুলি চালায় না! এটি আমাকে বেশ কয়েকবার ধরা দিয়েছে, এবং অ্যানিমেশনটির উপাদানটিতে কোনও প্রভাব ফেলবে না বলে মনে হচ্ছে। এটি ঘুরে দেখার জন্য, ইভেন্ট হ্যান্ডলারটিকে প্রত্যাশার মতো ট্রিগার করা হয়নি এমন পরিস্থিতিতে ফায়ার করার জন্য একটি সময়সীমা ব্যবহার করা বুদ্ধিমান হয়ে যায়। এই সমস্যা সম্পর্কে একটি ব্লগ পোস্ট এখানে উপলভ্য: http://www.cuppadev.co.uk/the-trouble-with-css-transitions/ <- 500 অভ্যন্তরীণ সার্ভার ত্রুটি
এটি মাথায় রেখে, আমি এই ইভেন্টটি কিছুটা কোড দেখতে দেখতে কিছুটা কোডের মধ্যে ব্যবহার করব tend
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 রূপান্তর ইভেন্টগুলি
transitionEndedHandlerমধ্যে transitionEnded(অথবা পরিবর্তন transitionEndedদ্বারা transitionEndedHandlerমধ্যে addEventListenerএবং removeEventListenerএবং কল transitionEndedমধ্যে transitionEndedHandler)
transitionEndedযখন ব্যবহার করতে চাইছিলাম তখনই ব্যবহার করতাম transitionEndedHandler।
আমি নিম্নলিখিত কোডটি ব্যবহার করছি, কোন নির্দিষ্ট শেষ ইভেন্টটি ব্রাউজার ব্যবহার করে তা সনাক্ত করার চেয়ে অনেক সহজ is
$(".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 ( ._.)
}
// 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 প্লাগইন , সিএসএস 3 রূপান্তরের এবং ট্রানজিশন জন্য একটি প্লাগইন, স্ক্রিপ্ট থেকে আপনার 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>