SORU
16 ŞUBAT 2011, ÇARŞAMBA


Nasıl tarayıcılarda CSS3 Geçiş fonksiyonları normale muyum?

Y geçiş son olay webkitTransitionEnd denir, Firefox transitionEnd, opera oTransitionEnd. Saf JS hepsini mücadele için iyi bir yol nedir? Tarayıcı koklama yapmalıyım? ya da her biri ayrı ayrı uygulamak? Aklıma gelmedi başka bir yol?

yani:

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

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

ya

//asigning an event listener per browser
element.addEventListener(webkitTransitionEnd, function(){callfunction()},false);
element.addEventListener(oTransitionEnd, function(){callfunction()},false);
element.addEventListener(transitionEnd, function(){callfunction()},false);

function callfunction() {
   //do whatever
}

CEVAP
1 ŞUBAT 2012, ÇARŞAMBA


Bir teknik Modernizr, geliştirilmiş: kullanılan var

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'; 
}

O zaman sadece geçiş son olay ne zaman ihtiyacın olursa bu işlevini çağırabilirsiniz:

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

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • David Tedeyev

    David Tedeye

    20 AĞUSTOS 2011
  • Distractify

    Distractify

    1 Aralık 2011
  • Shaollin Animes

    Shaollin Ani

    19 HAZİRAN 2013