วิธีรักษาสถานะสิ้นสุดภาพเคลื่อนไหว CSS3 ไม่เปลี่ยนแปลง

การแนะนำ

แอนิเมชั่น CSS3 นำเอฟเฟกต์ไดนามิกที่สมบูรณ์มาสู่การออกแบบเว็บไซต์ ทำให้เพจมีสีสันสดใสและน่าดึงดูดยิ่งขึ้น อย่างไรก็ตาม บางครั้งเราต้องการให้แอนิเมชันยังคงอยู่ในสถานะสุดท้ายเมื่อสิ้นสุด แทนที่จะกลับสู่สถานะเริ่มต้น บทความนี้จะแนะนำหลายวิธีในการบรรลุเอฟเฟกต์นี้ และตรวจสอบให้แน่ใจว่าภาพเคลื่อนไหวจะยังคงอยู่ในสถานะนี้เมื่อการกระทำสิ้นสุดลง

วิธีที่ 1: ใช้ animation-fill-mode

คุณสมบัติ animation-fill-mode ใช้เพื่อควบคุมสไตล์ของแอนิเมชั่นก่อนและหลังการเล่น ด้วยการตั้งค่าคุณสมบัตินี้ คุณสามารถบรรลุผลของการรักษาสถานะสุดท้ายเมื่อภาพเคลื่อนไหวสิ้นสุดลง

ค่าแอตทริบิวต์

ตัวอย่าง

 .องค์ประกอบ {
  แอนิเมชัน: การค่อยๆ เข้า-ออกของ myAnimation 2s;
  แอนิเมชั่นเติมโหมด: ส่งต่อ;
-
@keyframes myAnimation {
  0% {
    แปลงร่าง: แปล X (0);
  -
  100% {
    แปลงร่าง: แปลX(100px);
  -
-

ในตัวอย่างนี้ องค์ประกอบ .element element จะยังคงอยู่ในสถานะ transform: translateX(100px) หลังจากที่ภาพเคลื่อนไหวสิ้นสุดลง

วิธีที่ 2: ใช้เหตุการณ์ animationend

ด้วยการฟังเหตุการณ์ animationend ผ่าน JavaScript คุณสามารถตั้งค่ารูปแบบขององค์ประกอบเมื่อภาพเคลื่อนไหวสิ้นสุดลงได้ด้วยตนเอง เพื่อรักษาสถานะสิ้นสุดของภาพเคลื่อนไหว

ตัวอย่าง

 <div class="องค์ประกอบ"></div>

 .องค์ประกอบ {
  ความกว้าง: 100px;
  ความสูง: 100px;
  สีพื้นหลัง: สีแดง;
  แอนิเมชัน: การค่อยๆ เข้า-ออกของ myAnimation 2s;
-
@keyframes myAnimation {
  0% {
    แปลงร่าง: แปล X (0);
  -
  100% {
    แปลงร่าง: แปลX(100px);
  -
-

 องค์ประกอบ const = document.querySelector('.element');
element.addEventListener('ภาพเคลื่อนไหว', () => {
  องค์ประกอบ.style.transform = 'translateX(100px)';
-

ในตัวอย่างนี้ เมื่อภาพเคลื่อนไหวสิ้นสุดลง โค้ด JavaScript จะตั้งค่าคุณสมบัติ transform ขององค์ประกอบเป็น translateX(100px) ดังนั้นจึงคงสถานะสิ้นสุดของภาพเคลื่อนไหวไว้

วิธีที่ 3: ใช้แอตทริบิวต์ transition

แม้ว่าคุณสมบัติ transition ส่วนใหญ่จะใช้สำหรับเอฟเฟกต์การเปลี่ยนแปลง แต่การใช้อย่างชาญฉลาด คุณยังสามารถได้รับเอฟเฟกต์ของการรักษาสถานะสุดท้ายเมื่อภาพเคลื่อนไหวสิ้นสุดลง

ตัวอย่าง

 <div class="องค์ประกอบ"></div>

 .องค์ประกอบ {
  ความกว้าง: 100px;
  ความสูง: 100px;
  สีพื้นหลัง: สีแดง;
  การเปลี่ยนแปลง: เปลี่ยนความง่ายในการเข้า-ออกของ 2s;
-
.element.เคลื่อนไหว {
  แปลงร่าง: แปลX(100px);
-

 องค์ประกอบ const = document.querySelector('.element');
element.classList.add('เคลื่อนไหว');

ในตัวอย่างนี้ เมื่อเพิ่มคลาส animate คุณสมบัติ transform ขององค์ประกอบจะเปลี่ยนจากสถานะเริ่มต้นเป็น translateX(100px) และยังคงอยู่ในสถานะนั้นหลังจากสิ้นสุดการเปลี่ยน

สรุป

การรักษาสถานะสิ้นสุดของภาพเคลื่อนไหว CSS3 ไว้ไม่เปลี่ยนแปลงสามารถทำได้หลายวิธี รวมถึงการใช้คุณสมบัติ animation-fill-mode การฟังเหตุการณ์ animationend และการใช้คุณสมบัติ transition แต่ละวิธีมีสถานการณ์ที่เกี่ยวข้อง และนักพัฒนาสามารถเลือกวิธีที่เหมาะสมได้ตามความต้องการเฉพาะ

ฉันหวังว่าบทความนี้จะให้ความเข้าใจที่ชัดเจนและคำแนะนำที่เป็นประโยชน์แก่คุณ เพื่อช่วยให้คุณใช้ภาพเคลื่อนไหว CSS3 ในการพัฒนาจริงได้ดีขึ้น และบรรลุเอฟเฟกต์ไดนามิกที่จำเป็น

บทความนี้จะสรุปเกี่ยวกับวิธีรักษาสถานะสิ้นสุดของภาพเคลื่อนไหว CSS3 ไว้ไม่เปลี่ยนแปลง สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการรักษาสถานะสิ้นสุดของภาพเคลื่อนไหว CSS3 ไม่เปลี่ยนแปลง โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรืออ่านบทความที่เกี่ยวข้องด้านล่างต่อไป ทำเช่นนั้นในอนาคต สนับสนุน downcodes.com มากมาย!