CSS3 রূপান্তর শেষ হলে কলব্যাক back

Question

আমি একটি উপাদান বিবর্ণ করতে চাই (তার অস্বচ্ছতাটিকে 0 এ রূপান্তর করে) এবং তারপরে ডিওএম থেকে উপাদানটি সরিয়ে ফেলি।

JQuery এ এটি সোজা এগিয়ে রয়েছে যেহেতু আপনি কোনও অ্যানিমেশন সম্পন্ন হওয়ার পরে ঘটতে "সরান" নির্দিষ্ট করতে পারেন। তবে আমি যদি CSS3 রূপান্তরগুলি ব্যবহার করে অ্যানিমেট করতে চাই তবে কীভাবে ট্রানজিশন / অ্যানিমেশনটি শেষ হয়েছে তা জানতে হবে?

Comments

: এই অনুরূপ হওয়া উচিত stackoverflow.com/questions/6186454/...

— নিকোলাস Modrzyk

সদৃশ: স্ট্যাকওভারফ্লো

— বরুণ সিং

Answer 1

স্থানান্তরের জন্য আপনি jQuery এর মাধ্যমে কোনও সংক্রমণের শেষ সনাক্ত করতে নিম্নলিখিতটি ব্যবহার করতে পারেন:

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

মজিলার একটি দুর্দান্ত রেফারেন্স রয়েছে:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

অ্যানিমেশনগুলির জন্য এটি খুব মিল:

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

নোট করুন যে আপনি ব্রাউজারের পূর্বনির্ধারিত ইভেন্টের সমস্ত স্ট্রিং একই সাথে বাঁধাই () পদ্ধতিতে পাস করতে পারেন যা সমর্থন করে এমন সমস্ত ব্রাউজারগুলিতে ইভেন্ট ফায়ারিংকে সমর্থন করে।

হালনাগাদ:

হাঁসের মন্তব্য অনুসারে: আপনি .one()হ্যান্ডলারটি একবারে কেবল আগুনে তা নিশ্চিত করতে jQuery এর পদ্ধতিটি ব্যবহার করেন। উদাহরণ স্বরূপ:

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

আপডেট 2:

jQuery bind()পদ্ধতি অবমূল্যায়ন করা হয়েছে, এবং on()পদ্ধতিটি হিসাবে পছন্দ করা হয় jQuery 1.7।bind()

off()এটি একবারে বরখাস্ত করা হবে তা নিশ্চিত করতে আপনি কলব্যাক ফাংশনেও পদ্ধতি ব্যবহার করতে পারেন । এখানে একটি উদাহরণ যা one()পদ্ধতি ব্যবহারের সমতুল্য :

$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
 function(e){
    // do something here
    $(this).off(e);
 });

তথ্যসূত্র:

• .off()

• .one()

Comments

এটি লক্ষণীয় যে কলব্যাক সেইসাথে সংক্রামিত প্রতিটি বাচ্চার উপাদানগুলির জন্য বহিস্কার হবে । আপনি যদি ভাবছিলেন যে আপনার কলব্যাকটি আপনি প্রত্যাশার চেয়ে আরও বেশি বার কেন কর্মক্ষম হয়ে উঠছেন সে ক্ষেত্রে এটি মনে রাখা খুব জরুরি। আমি এখন পর্যন্ত কোনও কাজ সম্পর্কে সচেতন নই।

— লেভ

@ লাইভ আপনি ইভেন্টের বর্তমানের টার্গেটটিকে তার টার্গেটের সাথে তুলনা করে সহজেই এটিকে প্রশমিত করতে পারেন। সুতরাং এর মতো কিছু: ফাংশন (ইভেন্ট) {যদি (ইভেন্ট.আরগেট === ইভেন্ট কোডারট্যাটারেজ) {/ * স্টাফ করুন * /}}

— জিম জেফার্স

হ্যাঁ, আমি মন্তব্যটি লেখার কিছুক্ষণ পরেই বুঝতে পেরেছি। > _ <যদিও পোস্ট করার জন্য ধন্যবাদ; আমি নিশ্চিত যে এটি অন্যকে সাহায্য করবে! :)

— লেভ

আমরা jQuery v1.7 + api.jquery.com/bind এর.on() চেয়ে বেশি .bind()ব্যবহার করি

— olo 19

সমস্ত আধুনিক ব্রাউজার এখন অপ্রকাশিত ইভেন্টকে সমর্থন করে। caniuse.com/#feat=css-transitions এছাড়াও নোট করুন যে আপনার যদি "ট্রান্সজিড ওয়েবকিট ট্রানসিশন এন্ড" থাকে তবে এটি ক্রোমে দুবার ট্রিগার করা হবে।

— মাইকেল এস।

Answer 2

অন্য বিকল্প হ'ল আপনার সিএসএস 3 ট্রানজিশনগুলি পরিচালনা করতে jQuery ট্রানজিট ফ্রেমওয়ার্কটি ব্যবহার করা হবে । স্থানান্তর / প্রভাবগুলি মোবাইল ডিভাইসে ভাল সম্পাদন করে এবং অ্যানিমেশন প্রভাবগুলি করতে আপনাকে আপনার সিএসএস ফাইলে অগোছালো CSS3 রূপান্তরগুলির একটি একক লাইন যুক্ত করতে হবে না to

এখানে একটি উদাহরণ যা একটি উপাদানের অস্বচ্ছতা 0 এ স্থানান্তরিত করবে যখন আপনি এটিতে ক্লিক করেন এবং ট্রানজিশনটি শেষ হয়ে গেলে তা সরানো হবে:

$("#element").click( function () {
    $('#element').transition({ opacity: 0 }, function () { $(this).remove(); });
});

জেএস ফিডল ডেমো

Comments

কলব্যাক কাজ করছে না - সম্ভবত এটি ট্রানজিটের এপিআই পরিবর্তনের কারণে হয়েছে যা আমি জানি না, তবে ফিডাল উদাহরণটি কাজ করছে না। অ্যানিমেশনটি চালানোর আগে এটি লুকানোর পদ্ধতিটিকে ট্রিগার করে (ক্রোমে চেষ্টা করে)

— জোনাথন লিউটি

@ জোনাথনলিউটি ফায়ারফক্স 25, আই 11, ক্রোম 31 ব্যবহার করে পরীক্ষা করেছেন fine

— আরএফএলডাব্লিউটাইম

হ্যাঁ @ আরএফএলডব্লিউটাইম আপনি পুরোপুরি ঠিক বলেছেন - মনে হচ্ছে আমার ক্রোমটি কেবল উন্মাদ হয়ে উঠছিল। ক্রোম ক্লিন পুনঃসূচনা করার পরে আজ ফিডলটিকে পুনরায় প্রতিক্রিয়া জানিয়েছে এবং এটি প্রত্যাশার মতো কাজ করছে। আমার খারাপ! দুঃখিত!

— জোনাথন লিউটি

Answer 3

একটা হল animationendইভেন্ট দেখতে ডকুমেন্টেশন পর্যবেক্ষণ করা যায় এখানে , এছাড়াও CSS এর জন্য transitionঅ্যানিমেশন আপনি ব্যবহার করতে পারে transitionendঘটনা

অতিরিক্ত গ্রন্থাগারের দরকার নেই এই সমস্ত ভ্যানিলা জেএস দিয়ে কাজ করে

document.getElementById("myDIV").addEventListener("transitionend", myEndFunction);
function myEndFunction() {
	this.innerHTML = "transition event ended";
}

#myDIV {transition: top 2s; position: relative; top: 0;}
div {background: #ede;cursor: pointer;padding: 20px;}

<div id="myDIV" onclick="this.style.top = '55px';">Click me to start animation.</div>

Comments

এটি সীমান্তের লিংক-কেবল উত্তর । এখানে যত বেশি তথ্য অন্তর্ভুক্ত করতে আপনার উত্তরটি প্রসারিত করা উচিত, এবং কেবলমাত্র রেফারেন্সের জন্য লিঙ্কটি ব্যবহার করুন।

— গুডবাই স্ট্যাক এক্সচেঞ্জ

এটি প্রথম যেহেতু jQuery এর উপর নির্ভর করে না এটিকে ভোট দিন। কোনও শাখার জন্য পুরো গাছ কেটে ফেলার কোনও ধারণা নেই।

— অ্যারন ম্যাসন

Answer 4

এটি যে কারও পক্ষে কার্যকর হতে পারে তার জন্য, এখানে একটি jQuery নির্ভর ফাংশন আমার কাছে একটি CSS ক্লাসের মাধ্যমে সিএসএস অ্যানিমেশন প্রয়োগ করার পরে সাফল্য পেয়েছে, তারপরে একটি কলব্যাক পেয়েছে। ব্যাকবোন.জেএস অ্যাপ্লিকেশনটিতে এটি ব্যবহার করার পরে এটি পুরোপুরি কার্যকর নাও হতে পারে তবে কার্যকর হতে পারে।

var cssAnimate = function(cssClass, callback) {
    var self = this;

    // Checks if correct animation has ended
    var setAnimationListener = function() {
        self.one(
            "webkitAnimationEnd oanimationend msAnimationEnd animationend",
            function(e) {
                if(
                    e.originalEvent.animationName == cssClass &&
                    e.target === e.currentTarget
                ) {
                    callback();
                } else {
                    setAnimationListener();
                }
            }
        );
    }

    self.addClass(cssClass);
    setAnimationListener();
}

আমি এটিকে কিন্ডা ব্যবহার করেছি

cssAnimate.call($("#something"), "fadeIn", function() {
    console.log("Animation is complete");
    // Remove animation class name?
});

Http://mikefowler.me/2013/11/18/page-transitions-in-backbone/ থেকে আসল ধারণা

এবং এটি সুবিধাজনক বলে মনে হচ্ছে: http://api.jqueryui.com/addClass/

---

হালনাগাদ

উপরের কোড এবং অন্যান্য বিকল্পগুলির সাথে লড়াই করার পরে, আমি সিএসএস অ্যানিমেশন শেষের জন্য কোনও শ্রোতার সাথে খুব সতর্ক থাকার পরামর্শ দিচ্ছি। একাধিক অ্যানিমেশন চলার সাথে, ইভেন্ট শোনার জন্য এটি খুব অগোছালো হয়ে উঠতে পারে। আমি প্রতিটি অ্যানিমেশন এমনকি ছোটগুলির জন্যও জিএসএপির মতো অ্যানিমেশন লাইব্রেরিটির দৃ strongly় পরামর্শ দেব ।

Comments

এটি ভাগ করে নেওয়ার জন্য ধন্যবাদ, আমি এটি ব্যবহার করেছি এবং e.stopImmediatePropagation(); self.trigger(this.whichAnimationEvent()); //for purge existing event callback.apply(self);

— সংযুক্তি

Answer 5

গৃহীত উত্তরটি বর্তমানে ক্রোমে অ্যানিমেশনগুলির জন্য দু'বার জ্বলে ওঠে। সম্ভবত এটি কারণ এটি webkitAnimationEndপাশাপাশি স্বীকৃতি দেয় animationEnd। নিম্নলিখিতগুলি অবশ্যই একবারে জ্বলবে:

/* From Modernizr */
function whichTransitionEvent(){

    var el = document.createElement('fakeelement');
    var transitions = {
        'animation':'animationend',
        'OAnimation':'oAnimationEnd',
        'MSAnimation':'MSAnimationEnd',
        'WebkitAnimation':'webkitAnimationEnd'
    };

    for(var t in transitions){
        if( transitions.hasOwnProperty(t) && el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

$("#elementToListenTo")
    .on(whichTransitionEvent(),
        function(e){
            console.log('Transition complete!  This is the callback!');
            $(this).off(e);
        });

Comments

আমি পরিবর্তে ফাংশনটি অ্যানিমেশনএভেন্ট () এ কল করার পরামর্শ দেব, কারণ এটি অ্যানিমেশন ইভেন্টগুলির সাথে সম্পর্কিত।

— জাকব লাক্কে ম্যাডসেন