Vue Academy · บทเรียน

คอมโพเนนต์ Transition

v-enter-from, v-enter-active, v-enter-to, คลาส v-leave-* และพร็อพส์ name สำหรับคลาสแบบกำหนดเอง

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

คอมโพเนนต์ Transition ทำอะไร

วิวมีคอมโพเนนต์ <Transition> ในตัวที่ใช้ภาพเคลื่อนไหวตอนเข้าและออกกับองค์ประกอบหรือคอมโพเนนต์ เดี่ยว เมื่อถูกแทรกหรือนำออกผ่าน v-if หรือ v-show

คอมโพเนนต์นี้ไม่ได้สร้างองค์ประกอบ DOM เพิ่มขึ้นมาเอง แต่จัดการเฉพาะคลาส CSS และจังหวะเวลาบนองค์ประกอบลูกเท่านั้น

<Transition>
  <p v-if="show">Hello Vue</p>
</Transition>

ใช้ได้กับองค์ประกอบเดี่ยวเท่านั้น

<Transition> ต้องมีองค์ประกอบลูกโดยตรงเพียง หนึ่ง องค์ประกอบเท่านั้น การห่อหุ้มองค์ประกอบพี่น้องหลายองค์ประกอบจะไม่ทำงาน ให้ใช้ <TransitionGroup> สำหรับรายการแทน

องค์ประกอบลูกต้องถูกสลับด้วย v-if, v-show หรือคอมโพเนนต์แบบไดนามิก

<!-- valid: one child -->
<Transition>
  <div v-if="open" class="panel">Content</div>
</Transition>

คลาสการเปลี่ยนภาพทั้งหก

ระหว่างการเข้าและออก วิวจะเพิ่มและนำคลาสทั้งหกออกตามลำดับโดยอัตโนมัติ

v-enter-from / v-leave-from - สถานะเริ่มต้น
v-enter-active / v-leave-active - ระยะที่กำลังทำงานอยู่ ให้วางการเปลี่ยนภาพไว้ที่นี่
v-enter-to / v-leave-to - สถานะสิ้นสุด

/* default prefix is "v-" */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

ตั้งชื่อการเปลี่ยนภาพ

กำหนดพร็อพ name ให้การเปลี่ยนภาพ เพื่อเปลี่ยนคำนำหน้าคลาสจาก v- เป็นชื่อของคุณ เมื่อใช้ name="fade" คลาสจะกลายเป็น fade-enter-from, fade-enter-active และอื่น ๆ

<Transition name="fade">
  <p v-if="show">Fades in and out</p>
</Transition>

ตัวอย่างการจางแบบสมบูรณ์

การจางแบบคลาสสิกจะทำให้ opacity เปลี่ยนแปลง องค์ประกอบจะเริ่มต้นด้วยความโปร่งใสเต็มที่ คลาสที่กำลังทำงานจะประกาศการเปลี่ยนภาพ และคลาส to จะทำให้องค์ประกอบมีความทึบเต็มที่

.fade-enter-from {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 0.3s ease;
}
.fade-enter-to {
  opacity: 1;
}

ลำดับการเข้าทีละขั้นตอน

เมื่อองค์ประกอบถูกแทรก:

fade-enter-from และ fade-enter-active จะถูกเพิ่มก่อนการวาดภาพ โดยมีค่า opacity เป็น 0
ในเฟรมถัดไป fade-enter-from จะถูกนำออกและเพิ่ม fade-enter-to ทำให้ opacity เคลื่อนไปสู่ 1
เมื่อการเปลี่ยนภาพสิ้นสุดลง คลาสทั้ง active และ to จะถูกนำออก

/* frame 1: opacity 0 (enter-from + enter-active) */
/* frame 2: opacity 1 (enter-to + enter-active) */

ลำดับการออก

การออกจะทำงานในลักษณะเดียวกับการเข้า โดยใช้คลาส leave โดยทั่วไปคุณสามารถใช้กฎที่กำลังทำงานอยู่เดียวกันซ้ำสำหรับทั้งสองทิศทาง

.fade-leave-from {
  opacity: 1;
}
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-leave-to {
  opacity: 0;
}

v-if เทียบกับ v-show

ทั้งสองคำสั่งจะเรียกใช้การเปลี่ยนภาพ v-if จะเมานต์และถอดเมานต์องค์ประกอบจริง ส่วน v-show จะเก็บองค์ประกอบไว้ใน DOM และสลับค่า display สำหรับ v-show วิวจะจัดการการสลับ display รอบระยะที่กำลังทำงานอยู่ เพื่อให้ยังมองเห็นภาพเคลื่อนไหว

<Transition name="fade">
  <p v-show="visible">Toggled with display</p>
</Transition>

แสดงภาพเคลื่อนไหวเมื่อแสดงผลครั้งแรก

โดยค่าเริ่มต้น การเปลี่ยนภาพจะไม่ทำงานในการแสดงผลครั้งแรก ให้เพิ่มพร็อพ appear เพื่อให้ภาพเคลื่อนไหวตอนเข้าเล่นเมื่อคอมโพเนนต์ถูกเมานต์ครั้งแรก

<Transition name="fade" appear>
  <p>Animates in on page load</p>
</Transition>

การเปลี่ยนภาพระหว่างสององค์ประกอบ

ใช้ v-if / v-else ภายใน Transition เดียวเพื่อสลับองค์ประกอบสองรายการ กำหนด key ที่ไม่ซ้ำกันให้แต่ละรายการหากเป็นแท็กเดียวกัน เพื่อให้วิวถือว่าทั้งสองเป็นองค์ประกอบคนละรายการ

<Transition name="fade" mode="out-in">
  <button v-if="loading" key="load">Loading...</button>
  <button v-else key="done">Done</button>
</Transition>

การเคลื่อนไหวที่ลดลงและการเข้าถึงได้

เคารพผู้ใช้ที่ต้องการการเคลื่อนไหวน้อยลง ปิดใช้งานหรือลดระยะเวลาการเปลี่ยนภาพด้วยคำสั่งสื่อ prefers-reduced-motion เพื่อไม่ให้ภาพเคลื่อนไหวทำให้เกิดความไม่สบาย

@media (prefers-reduced-motion: reduce) {
  .fade-enter-active,
  .fade-leave-active {
    transition: none;
  }
}

ตรวจสอบอย่างรวดเร็ว

fade-enter-from กำหนดอะไร

สรุปทบทวน

คุณได้เรียนรู้คอมโพเนนต์ <Transition> ในตัวแล้ว โดยคอมโพเนนต์นี้ห่อหุ้มองค์ประกอบหนึ่งรายการที่สลับด้วย v-if/v-show ใช้คลาส CSS หกคลาส (enter-from, enter-active, enter-to และคลาสฝั่ง leave ที่สอดคล้องกัน) รองรับคำนำหน้าด้วย name, appear สำหรับการแสดงผลครั้งแรก และ mode สำหรับการสลับ

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

บทเรียน “คอมโพเนนต์ Transition” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “คอมโพเนนต์ Transition”

v-enter-from, v-enter-active, v-enter-to, คลาส v-leave-* และพร็อพส์ name สำหรับคลาสแบบกำหนดเอง คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “คอมโพเนนต์ Transition” ใช้เวลานานแค่ไหน

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

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

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

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

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