บทความนี้จะกล่าวถึงขั้นตอนการเรียกใช้ฟังก์ชัน JavaScript หลังจากภาพเคลื่อนไหว CSS
วิธีเรียกใช้ JavaScript หลังจาก CSS Animation เสร็จสิ้น
Javascript ให้ “ แอนิเมชั่นเริ่มต้น ” & “ เคลื่อนไหว ” เหตุการณ์ที่ให้นักพัฒนาเรียกใช้ฟังก์ชัน Javascript เมื่อภาพเคลื่อนไหวเริ่มหรือสิ้นสุด สิ่งนี้ทำให้นักพัฒนาสามารถดำเนินการใด ๆ หลังจากแอนิเมชั่นเสร็จสิ้นได้สะดวกมาก ไวยากรณ์สำหรับการใช้ “ เคลื่อนไหว ” เหตุการณ์มีดังนี้:
{ HTML องค์ประกอบ } . addEventListener ( 'ภาพเคลื่อนไหว' , ชื่อฟังก์ชัน ) ;
ในไวยากรณ์ที่ให้ไว้ข้างต้น ' เคลื่อนไหว ” ถือเป็นอาร์กิวเมนต์แรกสำหรับ Listener เหตุการณ์ ตามด้วยฟังก์ชันที่จะดำเนินการเมื่อภาพเคลื่อนไหวสิ้นสุดลง หนึ่ง ' ผู้ฟังเหตุการณ์ ” ใน Javascript จะเริ่มการทำงานของฟังก์ชันที่กำหนดเมื่อใดก็ตามที่มีเหตุการณ์เฉพาะเกิดขึ้น
มาทำความเข้าใจว่าผู้ใช้สามารถเรียกใช้ฟังก์ชัน JavaScript หลังจากภาพเคลื่อนไหว CSS โดยใช้ไวยากรณ์ที่กำหนดไว้ข้างต้นได้อย่างไร ในการสาธิตนี้ กล่องจะเคลื่อนไหวเพื่อเลื่อนลงและขึ้นมาอีกครั้งใน “ สี่ ” วินาที หลังจากภาพเคลื่อนไหวเสร็จสิ้น ข้อความจะปรากฏขึ้นโดยใช้ฟังก์ชัน JavaScript
< html >
< สไตล์ >
#myDIV {
ความกว้าง : : 150px ;
ความสูง : : 150px ;
ตำแหน่ง : : ญาติ ;
พื้นหลัง : : สีเขียวอ่อน ;
}
@คีย์เฟรมมูฟบ็อกซ์ {
0 % { สูงสุด : : 0px ; }
ห้าสิบ % { สูงสุด : : 200px ; พื้นหลัง : : สีชมพู ; }
100 % { สูงสุด : : 0px ; พื้นหลัง : : สีเขียวอ่อน ; }
}
สไตล์ >
< ร่างกาย >
< h1 > การรัน JavaScript หลังจาก ซีเอสเอส แอนิเมชั่น h1 >
< h3 > คลิกที่สี่เหลี่ยมด้านล่างเพื่อเริ่มแอนิเมชั่น h3 >
< รหัสพี = 'สำหรับ' > พี >
< รหัสดิวิชั่น = 'มายดีไอวี' เมื่อคลิก = 'ฟังก์ชันของฉัน()' > กอง >
< สคริปต์ >
ค่าคงที่ div1 = เอกสาร. รับ ElementById ( 'มายดีไอวี' ) ;
ค่าคงที่ สำหรับ = เอกสาร. รับ ElementById ( 'สำหรับ' ) ;
ฟังก์ชั่น myFunction ( ) {
div1 สไตล์ . แอนิเมชั่น = 'มูฟบ็อกซ์ 6เอส' ;
}
div1 addEventListener ( 'แอนิเมชั่นเริ่มต้น' , startFunction ) ;
div1 addEventListener ( 'ภาพเคลื่อนไหว' , สิ้นสุดฟังก์ชัน ) ;
ฟังก์ชัน startFunction ( ) {
สำหรับ. ภายในHTML = 'แอนิเมชั่นได้เริ่มต้นแล้ว...' ;
}
ฟังก์ชั่น endFunction ( ) {
สำหรับ. ภายในHTML = “อนิเมชั่นจบแล้ว!” ;
สำหรับ. สไตล์ . สี = 'สีแดง' ;
}
สคริปต์ >
ร่างกาย >
html >
คำอธิบายของโค้ดข้างต้นมีดังนี้:
- ใน ' <สไตล์> ” แท็ก องค์ประกอบที่มีรหัส “ myDIV ” มาพร้อมกับคุณสมบัติ CSS
- ต่อไป “ คีย์เฟรม ” ชื่อ “ moveBox ” ถูกสร้างขึ้นเพื่อจุดประสงค์ด้านแอนิเมชั่น มีสถานะเปลี่ยนผ่านสามสถานะ การเปลี่ยนแปลงครั้งแรกจะมาจาก “ 0% ' ถึง ' ห้าสิบ% '. จากนั้นการเปลี่ยนแปลงครั้งต่อไปจะมาจาก “ ห้าสิบ% ' ถึง ' 100% '.
- จากนั้นภายในแท็กเนื้อหาจะมีข้อความ “ h1 ” & “ h3 ” องค์ประกอบถูกสร้างขึ้น
- เอ “ ” องค์ประกอบที่มีรหัส “ สำหรับ ” ถูกสร้างขึ้น
- เอ “ กอง ” องค์ประกอบที่มีรหัส “ myDIV ” ถูกสร้างขึ้น นอกจากนี้ยังมีฟังก์ชันชื่อ “ ฟังก์ชั่นของฉัน() ” มีให้กับ “ เมื่อคลิก ” คุณลักษณะขององค์ประกอบ div
- ถัดมาภายใน “ <สคริปต์> ” จะมีการสร้างค่าคงที่สองค่า ค่าคงที่เหล่านี้ชี้ไปที่องค์ประกอบ HTML โดยใช้เครื่องหมาย “ .getElementByID() ' วิธี.
- ฟังก์ชั่นชื่อ “ ฟังก์ชั่นของฉัน() ” ถูกสร้างขึ้น ฟังก์ชั่นนี้จะทำให้ “ myDIV ” องค์ประกอบโดยใช้ “ moveBox ” คีย์เฟรม
- ถัดไป ตัวฟังเหตุการณ์สองตัวจะถูกสร้างขึ้นเพื่อเรียกใช้ฟังก์ชันที่ระบุบน ' แอนิเมชั่นเริ่มต้น ” เหตุการณ์และ “ เคลื่อนไหว ' เหตุการณ์.
- จากนั้นจะมีการกำหนดฟังก์ชันสองฟังก์ชันสำหรับเหตุการณ์ที่กล่าวมาข้างต้น
เอาท์พุท:
สามารถดูได้ในผลลัพธ์ด้านล่างเมื่อผู้ใช้คลิกที่กล่อง ภาพเคลื่อนไหวจะเริ่มต้นขึ้น ในกระบวนการสร้างภาพเคลื่อนไหว กล่องจะเปลี่ยนไป เลื่อนลง 200px และกลับมาที่ตำแหน่งเดิม ในระหว่างการเคลื่อนไหว สีของมันจะเปลี่ยนจากสีเขียวเป็นสีชมพูและกลับมาเป็นสีเขียวอีกครั้ง ต่อไปเป็นข้อความ “ อนิเมชั่นจบแล้ว! ” จะแสดงโดยใช้ฟังก์ชัน Javascript ที่ทำงานหลังจากภาพเคลื่อนไหว CSS เสร็จสิ้น
นั่นคือทั้งหมดที่เกี่ยวกับการเรียกใช้ฟังก์ชัน JavaScript หลังจากเสร็จสิ้นภาพเคลื่อนไหว CSS
บทสรุป
หากต้องการเรียกใช้ฟังก์ชัน JavaScript หลังจากภาพเคลื่อนไหว CSS เสร็จสิ้น ผู้ใช้สามารถใช้ตัวฟังเหตุการณ์ได้ เพื่อที่ผู้ใช้จะต้องจัดเตรียม “ เคลื่อนไหว ” เหตุการณ์เป็นอาร์กิวเมนต์แรก และฟังก์ชันเป็นอาร์กิวเมนต์ที่สองให้กับผู้ฟังเหตุการณ์ ฟังก์ชั่นที่ระบุจะถูกดำเนินการหลังจากภาพเคลื่อนไหวเสร็จสิ้น บทความนี้ได้จัดเตรียมขั้นตอนการเรียกใช้ฟังก์ชัน Javascript หลังจากภาพเคลื่อนไหว CSS