CSS3 অ্যানিমেশন ক্ষেত্রে কলব্যাক ফাংশন বাস্তবায়নের কোন উপায় আছে কি? জাভাস্ক্রিপ্ট অ্যানিমেশন এর ক্ষেত্রে এটি সম্ভব তবে সিএসএস 3 এ করার কোনও উপায় খুঁজে পাচ্ছে না।
আমি দেখতে পাবার একটি উপায় হ'ল অ্যানিমেশন সময়কালের পরে কলব্যাক চালানো কিন্তু এটি নিশ্চিত করে না যে অ্যানিমেশন শেষ হওয়ার পরে এটি সর্বদা ডাকা হবে। এটি ব্রাউজারের ইউআই সারির উপর নির্ভর করবে। আমি আরও শক্তিশালী পদ্ধতি চাই কোন সুত্র?
উত্তর:
হ্যা এখানে. কলব্যাক একটি ইভেন্ট, তাই এটি ধরার জন্য আপনাকে অবশ্যই ইভেন্ট শ্রোতা যুক্ত করতে হবে। এটি jQuery সহ একটি উদাহরণ:
$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() {
alert("fin")
});
বা খাঁটি জেএস:
element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);
লাইভ ডেমো: http://jsfiddle.net/W3y7h/
animationend এমএসডিএন.এমক্রিওফসটিও / ডেনমার্ক / লাইব্রেরি / আই / আই ব্যবহার করে । @ হাসকি কোডটি ক্রোম এবং এফএফ 14 এ কাজ করে, আপডেট ফিডল jsfiddle.net/W3y7h দেখুন
একটি কলব্যাক করার সহজ উপায় যা আপনার সিএসএস 3 ট্রানজিশনগুলি / ব্রাউজারের সামঞ্জস্যগুলিও পরিচালনা করে তা হ'ল jQuery ট্রানজিট প্লাগইন । উদাহরণ:
//Pulsing, moving element
$("#element").click( function () {
$('#element').transition({ opacity: 0, x: '75%' }, function () { $(this).transition({ opacity: 1, x: '0%' }).trigger("click"); });
});