Bagaimanakah Saya Boleh Mengesan Penyiapan Peralihan CSS?

Panggil balik pada CSS Transition

Soalan:

Adakah mungkin untuk menerima pemberitahuan apabila peralihan CSS mempunyai selesai?

Jawapan:

Ya, jika disokong oleh penyemak imbas, peristiwa akan dicetuskan apabila peralihan tamat. Walau bagaimanapun, acara khusus berbeza-beza merentas penyemak imbas:

• Pelayar webkit (Chrome, Safari): webkitTransitionEnd
• Firefox: transitionend
• IE9 : msTransitionEnd
• Opera: oTransitionEnd

Pertimbangan Tambahan:

• webkitTransitionEnd mungkin tidak selalu mencetuskan, terutamanya jika animasi tidak mempunyai kesan pada elemen.
• Sambungan tamat masa disyorkan untuk memastikan pengendali acara dipanggil sekiranya acara tidak berlaku dijangka.

Contoh Kod:

const transitionEndEventName = "XXX"; // Determine the appropriate event name
const elemToAnimate = ...; // Element to animate
let done = false;
const transitionEnded = () => {
  done = true;
  // Transition finished actions
  elemToAnimate.removeEventListener(transitionEndEventName, transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName, transitionEnded, false);

// Trigger animation

setTimeout(() => {
  if (!done) {
    console.log("Timeout required to call transition ended.");
    transitionEnded();
  }
}, XXX); // Replace XXX with animation duration plus a grace period

Nota:

• Acara peralihan tamat nama boleh diperoleh menggunakan kaedah yang dibincangkan dalam jawapan kepada "Bagaimana saya menormalkan fungsi Peralihan CSS3 merentas pelayar?"
• Isu ini juga berkaitan dengan "peristiwa peralihan CSS3."

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Penyiapan Peralihan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!