Vue Academy · บทเรียน

ฮุกการเปลี่ยนผ่านด้วย JavaScript

ฮุก @before-enter, @enter, @after-enter, @leave และการใช้ GSAP สำหรับแอนิเมชันที่ซับซ้อน

ฮุกการเปลี่ยนผ่านด้วย JavaScript เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุผลที่ใช้ฮุก JavaScript

คลาส CSS ครอบคลุมกรณีส่วนใหญ่ แต่ภาพเคลื่อนไหวบางอย่างจำเป็นต้องใช้ JavaScript เช่น การผสานไลบรารีอย่าง GSAP การทำภาพเคลื่อนไหวบนแคนวาส หรือการคำนวณค่าแบบไดนามิก <Transition> จึงเปิดให้ใช้ฮุกวงจรชีวิตสำหรับงานนี้โดยเฉพาะ

ฮุกที่มีให้ใช้

Vue จะส่งเหตุการณ์สำหรับแต่ละระยะ ได้แก่ @before-enter, @enter, @after-enter, @enter-cancelled และฮุกตอนออกที่สอดคล้องกัน

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @leave="onLeave"
>
  <div v-if="show">Animated by JS</div>
</Transition>

กำหนดสถานะเริ่มต้นก่อนเข้า

@before-enter จะได้รับองค์ประกอบ DOM และทำงานก่อนการแทรก ใช้ฮุกนี้เพื่อกำหนดรูปแบบเริ่มต้น เช่นเดียวกับที่คลาส enter-from ทำ

function onBeforeEnter(el) {
  el.style.opacity = 0;
  el.style.transform = "translateY(20px)";
}

ฮุกเข้าได้รับองค์ประกอบและการเรียกกลับเมื่อเสร็จสิ้น

@enter ได้รับอาร์กิวเมนต์สองรายการ ได้แก่ องค์ประกอบและฟังก์ชันเรียกกลับ done คุณทำภาพเคลื่อนไหวให้องค์ประกอบ แล้วเรียก done() เมื่อเสร็จสิ้น เพื่อให้ Vue ทราบว่าการเปลี่ยนผ่านจบลงแล้ว

function onEnter(el, done) {
  // animate to final state
  el.style.transition = "all 0.4s ease";
  el.style.opacity = 1;
  el.style.transform = "translateY(0)";
  el.addEventListener("transitionend", done, { once: true });
}

เรียก done เสมอ

หากลืมเรียก done() Vue จะรอไปตลอดและการเปลี่ยนผ่านจะไม่เสร็จสิ้น after-enter จะไม่ทำงาน และองค์ประกอบอาจค้างอยู่ในสถานะที่ทำภาพเคลื่อนไหวไม่สมบูรณ์ การเรียกใช้ฟังก์ชันนี้เป็นสิ่งจำเป็นในฮุกที่ขับเคลื่อนด้วย JS

function onEnter(el, done) {
  // ... animate ...
  setTimeout(done, 400); // fallback if no transitionend
}

ออกพร้อมการเรียกกลับเมื่อเสร็จสิ้น

ฮุก @leave ทำงานในลักษณะเดียวกัน นั่นคือทำภาพเคลื่อนไหวให้องค์ประกอบออกไป แล้วเรียก done() เพื่อให้ Vue ลบองค์ประกอบออกจาก DOM

function onLeave(el, done) {
  el.style.transition = "all 0.3s ease";
  el.style.opacity = 0;
  el.addEventListener("transitionend", done, { once: true });
}

ใช้ after-enter เพื่อล้างข้อมูล

@after-enter จะทำงานเมื่อการเข้าเสร็จสิ้น ใช้ฮุกนี้เพื่อลบรูปแบบที่กำหนดในบรรทัด รีเซ็ตคุณสมบัติการเปลี่ยนผ่าน หรือเรียกใช้ตรรกะต่อเนื่อง

function onAfterEnter(el) {
  el.style.transition = "";
  el.style.transform = "";
}

ข้าม CSS ด้วย :css="false"

เมื่อทำภาพเคลื่อนไหวด้วย JS เพียงอย่างเดียว ให้ตั้งค่า :css="false" ซึ่งบอกให้ Vue ข้ามการตรวจหาคลาส CSS ทั้งหมด และอาศัยเฉพาะฟังก์ชันเรียกกลับ done ของคุณเพื่อกำหนดเวลา นอกจากนี้ยังป้องกันการรบกวนจาก CSS โดยไม่ตั้งใจ

<Transition
  :css="false"
  @enter="onEnter"
  @leave="onLeave"
>
  <div v-if="show">Pure JS animation</div>
</Transition>

การผสาน GSAP

ฮุก JS มีประโยชน์อย่างมากเมื่อใช้ร่วมกับไลบรารีภาพเคลื่อนไหว GSAP สามารถทำทวีนให้องค์ประกอบและรับ done เป็นฟังก์ชันเรียกกลับ onComplete ได้

function onEnter(el, done) {
  gsap.from(el, {
    opacity: 0,
    y: 30,
    duration: 0.4,
    onComplete: done
  });
}

ฮุกเมื่อถูกยกเลิก

@enter-cancelled และ @leave-cancelled จะทำงานหากการเปลี่ยนผ่านถูกขัดจังหวะ เช่น ผู้ใช้สลับอย่างรวดเร็ว ใช้ฮุกเหล่านี้เพื่อหยุดทวีนที่กำลังทำงานและป้องกันสถานะตกค้าง

function onEnterCancelled(el) {
  gsap.killTweensOf(el);
}

ควรเลือกใช้ฮุก JS เมื่อใด

เลือกใช้ฮุก JS เมื่อจำเป็นต้องใช้ฟิสิกส์ ค่าแบบไดนามิกที่แตกต่างกันในแต่ละองค์ประกอบ การผสานไลบรารี หรือลำดับการทำงานที่แม่นยำ สำหรับการเฟดและการเลื่อนแบบง่าย ๆ คลาส CSS จะเรียบง่ายและมีประสิทธิภาพมากกว่า

ตรวจสอบความเข้าใจ

เหตุใดจึงส่ง :css="false" ไปพร้อมกับฮุก JavaScript

สรุปทบทวน

คุณได้เรียนรู้ฮุกการเปลี่ยนผ่านด้วย JS ได้แก่ @before-enter (กำหนดสถานะเริ่มต้น), @enter/@leave (ทำภาพเคลื่อนไหวแล้วเรียก done), @after-enter (ล้างข้อมูล) รวมถึง :css="false" เพื่อข้ามคลาส CSS และฮุกเมื่อถูกยกเลิกสำหรับกรณีที่ถูกขัดจังหวะ

คำถามที่พบบ่อย

บทเรียน “ฮุกการเปลี่ยนผ่านด้วย JavaScript” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ฮุกการเปลี่ยนผ่านด้วย JavaScript” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ฮุกการเปลี่ยนผ่านด้วย JavaScript”

ฮุก @before-enter, @enter, @after-enter, @leave และการใช้ GSAP สำหรับแอนิเมชันที่ซับซ้อน คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “ฮุกการเปลี่ยนผ่านด้วย JavaScript” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Vue Academy