Bagaimanakah Saya Boleh Menormalkan Peristiwa Tamat Peralihan CSS3 Merentasi Pelayar Berbeza Menggunakan JavaScript?

Penormalan Rentas Pelayar Peristiwa Tamat Peralihan CSS3

Penyataan Masalah:

Dalam berbeza pelayar, peristiwa tamat peralihan CSS3 dicetuskan secara berbeza: "webkitTransitionEnd" dalam Webkit, "transitionEnd" dalam Firefox dan "oTransitionEnd" dalam Opera. Bagaimanakah kita boleh mengendalikan variasi ini dengan lancar dalam JavaScript tulen?

Penyelesaian:

Melaksanakan pendengar acara berasingan untuk setiap penyemak imbas adalah tidak cekap dan membosankan. Sebaliknya, penyelesaian yang lebih elegan yang dicadangkan dalam Modernizr boleh digunakan:

function transitionEndEventName() {
  var el = document.createElement('div'),
      transitions = {
        'transition':'transitionend',
        'OTransition':'otransitionend',
        'MozTransition':'transitionend',
        'WebkitTransition':'webkitTransitionEnd'
      };

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

Fungsi ini menyemak peristiwa peralihan yang disokong dalam penyemak imbas semasa dengan mencipta elemen dan berulang melalui nama acara yang berpotensi. Ia mengembalikan nama acara yang sesuai apabila ditemui.

Untuk menggunakan penyelesaian ini:

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

Pendekatan ini memastikan keserasian merentas pelayar dan mengelakkan menghidu penyemak imbas atau tugasan berbilang acara.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menormalkan Peristiwa Tamat Peralihan CSS3 Merentasi Pelayar Berbeza Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!