ในยุคของ CSS3 มีความเป็นไปได้ที่ CSS3-Animation;
JS แบบดั้งเดิมสามารถตรวจสอบได้ว่าภาพเคลื่อนไหวสิ้นสุดลงผ่านฟังก์ชั่นการโทรกลับหรือไม่ แม้ว่าเทคโนโลยี CSS จะถูกใช้เพื่อสร้างเอฟเฟกต์ภาพเคลื่อนไหว JavaScript ยังคงสามารถจับเหตุการณ์สิ้นสุดของภาพเคลื่อนไหวหรือการเปลี่ยนแปลงได้
เหตุการณ์การส่งผ่านและกิจกรรมแอนิเมชั่นอีเว้นท์เบราว์เซอร์มาตรฐาน แต่ในเบราว์เซอร์ WebKit คุณยังต้องใช้คำนำหน้า WebKit ดังนั้นเราจึงต้องตรวจจับเหตุการณ์ต่าง ๆ ตามเบราว์เซอร์ต่างๆ
การคัดลอกรหัสมีดังนี้:
var transitions = {
'การเปลี่ยนแปลง': 'transitionend',
'otransition': 'otransitionend'
'Moztransition': 'Transitionend',
'WebKitTransition': 'WebKitTransitionend'
-
ซอร์สโค้ดแนบด้านล่าง:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Suface JS กำหนดว่าแอนิเมชั่น CSS สิ้นสุดลง </title>
</head>
<body>
<p> ทันทีที่ภาพเคลื่อนไหวหรือการแปลงเสร็จสิ้นฟังก์ชั่นการโทรกลับจะถูกยิง ไม่จำเป็นต้องรองรับห้องสมุดชั้นเรียนขนาดใหญ่อีกต่อไป <br> </p>
<style type = "text/css">
. ตัวอย่าง {
ความกว้าง: 200px;
ความสูง: 200px;
ชายแดน: 1px Solid Green;
ความเป็นมา: LightGreen;
ความทึบ: 1;
มาร์จิ้น-ก้น: 20px;
Transition-Property: ความทึบ;
/*การเปลี่ยนระยะเวลา: .5S;*/
ช่วงเวลาการเปลี่ยนแปลง: 3s;
-
.Sample.hide {
ความทึบ: 0;
-
</style>
<div> แอนิเมชั่น CSS3 ถูกซ่อนไว้มากเกินไป (ช่วงการเปลี่ยนภาพ: 3s;) </div>
<p> <button onclick = "this.style.display = 'none'; startfade ();"> ค่อยๆจางหายไปการตรวจจับสิ้นสุดเหตุการณ์ </ button> </p>
<script>
(การทำงาน() {
var e = document.getElementsByClassName ('ตัวอย่าง') [0];
ฟังก์ชั่น WhoTransitionEvent () {
var t;
var el = document.createElement ('fakeElement');
var transitions = {
'การเปลี่ยนแปลง': 'transitionend',
'otransition': 'otransitionend'
'Moztransition': 'Transitionend',
'WebKitTransition': 'WebKitTransitionend'
-
สำหรับ (t ในช่วงการเปลี่ยนภาพ) {
if (el.style [t]! == ไม่ได้กำหนด) {
ส่งคืนการเปลี่ยน [t];
-
-
-
var transitionEvent = wherTransitionEvent ();
TransitionEvent && E.AdDeventListener (TransitiONEVENT, FUNCTION () {
การแจ้งเตือน ('การเคลื่อนไหว CSS3 สิ้นสุดลง! ฉันเป็นฟังก์ชั่นการโทรกลับไม่มีการใช้ไลบรารีคลาสบุคคลที่สาม!');
-
startFade = function () {
e.className+= 'ซ่อน';
-
}) (); <br> </script>
</body>
</html>
ข้างต้นเป็นวิธีที่อธิบายไว้ในบทความนี้เกี่ยวกับ JavaScript เพื่อตัดสินจุดสิ้นสุดของภาพเคลื่อนไหว CSS3 ฉันหวังว่าทุกคนจะชอบมัน