আমি ব্রাউজারগুলিতে CSS3 স্থানান্তর ফাংশন কীভাবে সাধারণ করব?

Question 1

ওয়েবকিটের ট্রানজিশন শেষ ইভেন্টটিকে বলা হয় ওয়েবকিট ট্রান্সানিশন এবং ফায়ারফক্স হ'ল ট্রানজিশন ইন্ড, অপেরা হ'ল ট্রানসিশনএন্ড nd খাঁটি জেএস এ সমস্তকে মোকাবেলার একটি ভাল উপায় কী? আমি ব্রাউজার স্নিফিং করা উচিত? বা পৃথকভাবে প্রতিটি বাস্তবায়ন? আমার সাথে ঘটে না এমন অন্য কোনও উপায়?

অর্থাত:

//doing browser sniffing
var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd";

element.addEventListener(transitionend, function(){
  //do whatever
},false);

বা

// Assigning an event listener per browser
element.addEventListener("webkitTransitionEnd", fn);
element.addEventListener("oTransitionEnd", fn);
element.addEventListener("transitionEnd", fn);

function fn() {
   //do whatever
}

Question 2

মডার্নিজারে ব্যবহৃত একটি প্রযুক্তি রয়েছে, উন্নতি হয়েছে:

function transitionEndEventName () {
    var i,
        undefined,
        el = document.createElement('div'),
        transitions = {
            'transition':'transitionend',
            'OTransition':'otransitionend',  // oTransitionEnd in very old Opera
            'MozTransition':'transitionend',
            'WebkitTransition':'webkitTransitionEnd'
        };

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

    //TODO: throw 'TransitionEnd event is not supported in this browser'; 
}

তারপরে আপনি যখনই ট্রানজিশন শেষ ইভেন্টটি প্রয়োজন তখন কেবল এই ফাংশনটি কল করতে পারেন:

var transitionEnd = transitionEndEventName();
element.addEventListener(transitionEnd, theFunctionToInvoke, false);

Question 3

মাতিজদের মন্তব্য অনুসারে, ট্রানজিশন ইভেন্টগুলি সনাক্ত করার সবচেয়ে সহজ উপায় হল এই ক্ষেত্রে একটি লাইব্রেরি, জ্যাকোয়ারি সহ:

$("div").bind("webkitTransitionEnd.done oTransitionEnd.done otransitionend.done transitionend.done msTransitionEnd.done", function(){
  // Unlisten called events by namespace,
  // to prevent multiple event calls. (See comment)
  // By the way, .done can be anything you like ;)
  $(this).off('.done')
});

লাইব্রেরি-কম জাভাস্ক্রিপ্টে এটি কিছুটা ভারবস হয়:

element.addEventListener('webkitTransitionEnd', callfunction, false);
element.addEventListener('oTransitionEnd', callfunction, false);
element.addEventListener('transitionend', callfunction, false);
element.addEventListener('msTransitionEnd', callfunction, false);

function callfunction() {
   //do whatever
}

Question 4

হালনাগাদ

নিম্নলিখিতটি এটি করার একটি ক্লিনার উপায় এবং আধুনিকীকরণের প্রয়োজন নেই

$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
function() {
 //do something
});

বিকল্পভাবে

var transEndEventNames = {
        'WebkitTransition': 'webkitTransitionEnd',
        'MozTransition': 'transitionend',
        'OTransition': 'oTransitionEnd otransitionend',
        'msTransition': 'MSTransitionEnd',
        'transition': 'transitionend'
    }, transitionEnd = transEndEventNames[Modernizr.prefixed('transition')];

এটি মডার্নিজর দ্বারা প্রস্তাবিত কোডের ভিত্তিতে, তবে অপেরার নতুন সংস্করণগুলির জন্য অতিরিক্ত ইভেন্টের সাথে।

http://modernizr.com/docs/#prefixed

Question 5

আপনি যদি jQuery এবং বুটস্ট্র্যাপ $.support.transition.endব্যবহার করেন তবে বর্তমান ব্রাউজারের জন্য সঠিক ইভেন্টটি ফিরে আসবে।

এটি বুটস্ট্র্যাপে সংজ্ঞায়িত করা হয়েছে এবং এর অ্যানিমেশন কলব্যাকগুলিতে ব্যবহৃত হয়েছে , যদিও jQuery ডকস এই বৈশিষ্ট্যগুলিতে নির্ভর না করার জন্য বলেছেন:

যদিও এর মধ্যে কয়েকটি বৈশিষ্ট্য নীচে নথিভুক্ত করা হয়েছে তবে সেগুলি দীর্ঘ অবমূল্যায়ন / অপসারণ চক্রের সাপেক্ষে নয় এবং অভ্যন্তরীণ jQuery কোডটি আর প্রয়োজন না হলে এটি অপসারণ করা যেতে পারে।

http://api.jquery.com/jQuery.support/

Question 6

২০১৫ সালের হিসাবে, এই ওয়ান-লাইনারের ডিলটি করা উচিত (IE 10+, ক্রোম 1+, সাফারি 3.2+, এফএফ 4+ এবং অপেরা 12 +): -

var transEndEventName = ('WebkitTransition' in document.documentElement.style) ? 'webkitTransitionEnd' : 'transitionend'

ইভেন্ট শ্রোতাদের সংযুক্ত করা সহজ: -

element.addEventListener(transEndEventName , theFunctionToInvoke);

Question 7

দ্বিতীয়টি হল উপায়। প্রতিটি ব্রাউজারে এই ইভেন্টগুলির মধ্যে একটিতে আগুন জ্বলবে, যাতে আপনি সেগুলি সব সেট করতে পারেন এবং এটি কার্যকর হবে।

Question 8

এখানে আরও পরিষ্কার উপায়

 function transitionEvent() {
      // Create a fake element
      var el = document.createElement("div");

      if(el.style.OTransition) return "oTransitionEnd";
      if(el.style.WebkitTransition) return "webkitTransitionEnd";
      return "transitionend";
    }

Question 9

গুগল ক্লোজার নিশ্চিত করে যে আপনাকে এটি করতে হবে না। আপনার যদি কোনও উপাদান থাকে:

goog.events.listen(element, goog.events.EventType.TRANSITIONEND, function(event) {
  // ... your code here
});

goog.events.eventtype.js এর উত্সটি দেখে, ট্রান্সানিশনড ইউজারেজেন্টকে দেখে গণনা করা হয়:

// CSS transition events. Based on the browser support described at:
  // https://developer.mozilla.org/en/css/css_transitions#Browser_compatibility
  TRANSITIONEND: goog.userAgent.WEBKIT ? 'webkitTransitionEnd' :
      (goog.userAgent.OPERA ? 'oTransitionEnd' : 'transitionend'),

Question 10

আমি এই জাতীয় কোড ব্যবহার করি (jQuery সহ)

var vP = "";
var transitionEnd = "transitionend";
if ($.browser.webkit) {
    vP = "-webkit-";
    transitionEnd = "webkitTransitionEnd";
} else if ($.browser.msie) {
    vP = "-ms-";
} else if ($.browser.mozilla) {
    vP = "-moz-";
} else if ($.browser.opera) {
    vP = "-o-";
    transitionEnd = "otransitionend"; //oTransitionEnd for very old Opera
}

এটি আমাকে সম্পত্তি যুক্ত করে ভিপি নির্দিষ্ট করে জিনিস যুক্ত করতে জেএস ব্যবহার করতে দেয় এবং এটি যদি কোনও ব্রাউজারে না আসে তবে এটি কেবল স্ট্যান্ডার্ড ব্যবহার করে। ইভেন্টগুলি আমাকে সহজে এর মতো করে বাঁধতে দেয়:

object.bind(transitionEnd,function(){
    callback();
});

Question 11

jquery ওভাররাইড:

(function ($) {
  var oldOn = $.fn.on;

  $.fn.on = function (types, selector, data, fn, /*INTERNAL*/ one) {
    if (types === 'transitionend') {
      types = 'transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd';
    }

    return oldOn.call(this, types, selector, data, fn, one);
  };
})(jQuery);

এবং ব্যবহারের মতো:

$('myDiv').on('transitionend', function() { ... });

Question 12

গৃহীত উত্তর সঠিক তবে আপনাকে সেই উপাদানটি পুনরায় তৈরি করতে হবে না এবং ...

একটি গ্লোবাল ভেরিয়েবল তৈরি করুন এবং ফাংশন যুক্ত করুন:

(function(myLib, $, window, document, undefined){

/**
 * @summary
 * Returns the browser's supported animation end event type.
 * @desc
 * @see {@link https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/}
 * @function myLib.getAnimationEndType
 * @return {string} The animation end event type
 */
(function(){
   var type;

   myLib.getAnimationEndType = function(){
      if(!type)
         type = callback();
      return type;

      function callback(){
         var t,
             el = document.createElement("fakeelement");

         var animations = {
            "animation"      : "animationend",
            "OAnimation"     : "oAnimationEnd",
            "MozAnimation"   : "animationend",
            "WebkitAnimation": "webkitAnimationEnd"
         }

         for (t in animations){
            if (el.style[t] !== undefined){
               return animations[t];
            }
         }
      }
   }
}());

/**
 * @summary
 * Returns the browser's supported transition end event type.
 * @desc
 * @see {@link https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/}
 * @function myLib.getTransitionEndType
 * @return {string} The transition end event type
 */
(function(){
   var type;

   myLib.getTransitionEndType = function(){
      if(!type)
         type = callback();
      return type;

      function callback(){
         var t,
             el = document.createElement("fakeelement");

         var transitions = {
            "transition"      : "transitionend",
            "OTransition"     : "oTransitionEnd",
            "MozTransition"   : "transitionend",
            "WebkitTransition": "webkitTransitionEnd"
         }

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

}(window.myLib = window.myLib || {}, jQuery, window, document));