Vue Academy · บทเรียน

TransitionGroup สำหรับแอนิเมชันรายการ

การทำแอนิเมชันให้รายการ v-for การเปลี่ยนตำแหน่ง และแอนิเมชันแบบเหลื่อมเวลาด้วย delay

บทเรียน 4 จาก 413 ขั้นตอน

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

การทำภาพเคลื่อนไหวให้รายการ

<Transition> จัดการองค์ประกอบเดียว สำหรับรายการที่แสดงผลด้วย v-for ให้ใช้ <TransitionGroup> ซึ่งทำภาพเคลื่อนไหวให้รายการเมื่อถูกเพิ่ม ลบ และจัดลำดับใหม่

พร็อพ tag

ต่างจากการเปลี่ยนผ่านตรงที่ TransitionGroup สามารถแสดงผลด้วยองค์ประกอบตัวห่อจริงได้ ส่ง tag="ul" หรือแท็กใดก็ได้ แล้วระบบจะแสดงองค์ประกอบนั้นครอบรายการทั้งหมด

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</TransitionGroup>

ทุกรายการต้องมี key

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

<li v-for="item in items" :key="item.id">{{ item.text }}</li>

คลาสสำหรับเข้าและออก

TransitionGroup ใช้คลาสสำหรับเข้าและออกแบบเดียวกับ Transition ให้กำหนดคลาสเหล่านี้เพื่อควบคุมการปรากฏและการลบของแต่ละรายการ

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

คลาสพิเศษสำหรับการเคลื่อนที่

จุดเด่นคือคลาส -move เช่น list-move เมื่อรายการถูกจัดลำดับใหม่ Vue จะทำภาพเคลื่อนไหวให้แต่ละรายการเคลื่อนไปยังตำแหน่งใหม่อย่างราบรื่น โดยใช้การเปลี่ยนผ่านของการแปลง

.list-move {
  transition: transform 0.4s ease;
}

เทคนิค FLIP

เบื้องหลัง -move คือ FLIP: F (ขั้นแรก) บันทึกตำแหน่งเดิม L (ขั้นสุดท้าย) อ่านตำแหน่งใหม่ I (กลับด้าน) ด้วยการแปลงเพื่อให้ดูเหมือนยังไม่เคลื่อนที่ แล้ว P (เล่น) โดยนำการแปลงออก Vue ทำทั้งหมดนี้ให้โดยอัตโนมัติ

/* Vue computes: translate(oldX - newX) then animates to 0 */

รายการที่กำลังออกต้องใช้การจัดตำแหน่งแบบสัมบูรณ์

องค์ประกอบที่กำลังถูกลบยังคงใช้พื้นที่อยู่ ซึ่งอาจทำให้ภาพเคลื่อนไหวของรายการข้างเคียงเสียหาย ให้ตั้งค่า position: absolute บนคลาส leave-active เพื่อดึงรายการที่กำลังออกจากการจัดวางตามปกติ

.list-leave-active {
  position: absolute;
}

ตัวอย่างรายการที่จัดเรียงได้

ผสานคลาสสำหรับเข้า ออก และเคลื่อนที่เข้าด้วยกัน แล้ว Vue จะทำภาพเคลื่อนไหวของการแทรก การลบ และการสลับลำดับพร้อมกัน

function shuffle() {
  items.value = items.value
    .slice()
    .sort(() => Math.random() - 0.5);
}

จัดจังหวะด้วย transitionDelay

หากต้องการให้รายการปรากฏทีละรายการ ให้ผูก transition-delay ในบรรทัดโดยอิงจากดัชนีของรายการ แต่ละรายการจะรอนานกว่ารายการก่อนหน้าเล็กน้อย

<li
  v-for="(item, i) in items"
  :key="item.id"
  :style="{ transitionDelay: i * 50 + 'ms' }"
>
  {{ item.text }}
</li>

จัดจังหวะด้วยฮุก JS

สำหรับการจัดจังหวะตามข้อมูล คุณยังใช้ฮุก JS และแอตทริบิวต์ดัชนีข้อมูลได้ โดยหน่วงเวลาแต่ละ onEnter ตามดัชนีขององค์ประกอบ

function onEnter(el, done) {
  const delay = el.dataset.index * 50;
  setTimeout(() => {
    el.style.opacity = 1;
    done();
  }, delay);
}

ข้อควรทราบด้านประสิทธิภาพ

FLIP ทำภาพเคลื่อนไหวกับ transform ซึ่งเหมาะกับ GPU รายการควรมีขนาดพอเหมาะ และควรเลือกใช้การแปลงหรือความทึบแทนคุณสมบัติที่ทำให้เกิดการคำนวณเค้าโครงใหม่ เช่น ความกว้างหรือตำแหน่งด้านบน เพื่อให้การเคลื่อนไหวที่ 60fps ราบรื่น

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

คลาส list-move ช่วยให้ทำอะไรได้

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปทบทวน

คุณได้เรียนรู้การใช้ <TransitionGroup> กับรายการ ได้แก่ แสดงผลตัวห่อด้วย tag กำหนด :key ที่ไม่ซ้ำกันให้ทุกรายการ ใช้คลาสสำหรับเข้าและออกควบคู่กับคลาส -move เพื่อทำภาพเคลื่อนไหวการจัดลำดับใหม่ด้วย FLIP จัดตำแหน่งรายการที่กำลังออกแบบสัมบูรณ์ และสร้างเอฟเฟกต์จัดจังหวะด้วย transitionDelay ที่อิงจากดัชนี

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 42
บทเรียน: 156

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “TransitionGroup สำหรับแอนิเมชันรายการ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “TransitionGroup สำหรับแอนิเมชันรายการ”

การทำแอนิเมชันให้รายการ v-for การเปลี่ยนตำแหน่ง และแอนิเมชันแบบเหลื่อมเวลาด้วย delay คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “TransitionGroup สำหรับแอนิเมชันรายการ” ใช้เวลานานแค่ไหน

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

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

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

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

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