Bagaimanakah Saya Boleh Mengesan dan Mengendalikan Peristiwa Tamat Peralihan CSS3 Merentasi Pelayar Berbeza?

Penormalan Merentas Penyemak Imbas Peristiwa Tamat Peralihan CSS3

Berurusan dengan nama acara penamat peralihan CSS3 yang berbeza merentas penyemak imbas boleh menjadi satu cabaran. Berikut ialah beberapa pendekatan untuk menangani isu ini:

Penghidu Penyemak Imbas

Satu pendekatan ialah menghidu penyemak imbas, seperti yang ditunjukkan di bawah:

var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd" : "transitionend";

element.addEventListener(transitionend, function() {
  // Do something
}, false);

Kaedah ini menyemak ejen pengguna penyemak imbas tertentu dan memberikan nama acara yang sesuai. Walau bagaimanapun, ia bergantung pada peraturan yang dipratentukan khusus dan mungkin tidak mengambil kira semua versi penyemak imbas atau kemungkinan variasi.

Berbilang Pendengar Acara

Sebagai alternatif, anda boleh melampirkan berbilang pendengar acara untuk setiap nama acara penyemak imbas yang disokong:

element.addEventListener("webkitTransitionEnd", fn);
element.addEventListener("oTransitionEnd", fn);
element.addEventListener("transitionEnd", fn);

function fn() {
  // Do something
}

Pendekatan ini mengendalikan semua acara yang disokong tetapi mungkin membawa kepada yang tidak perlu overhed pengendalian acara.

Teknik Modernizr yang Diperbaiki

Pendekatan yang lebih mantap dan mesra penyemak imbas adalah untuk menentukan secara dinamik nama acara akhir peralihan menggunakan perpustakaan Modernizr:

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

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

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

Teknik ini mengelakkan daripada menghidu penyemak imbas dan mengesan acara yang disokong secara dinamik nama berdasarkan sifat CSS yang disokong elemen.

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