การเปลี่ยนเส้นทางและแอนิเมชัน
RouterView ร่วมกับ Transition การกำหนด transition-name ตามเส้นทาง และการเลื่อน/จางระหว่างเส้นทาง
การเปลี่ยนเส้นทางและแอนิเมชัน เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
การทำภาพเคลื่อนไหวระหว่างเส้นทาง
เมื่อ URL เปลี่ยน คอมโพเนนต์ที่จับคู่จะสลับทันที ด้วยการครอบมุมมองด้วย การเปลี่ยนฉากของ Vue คุณสามารถทำให้หน้าเว็บค่อย ๆ ปรากฏหรือเลื่อนเปลี่ยนหน้า เพื่อให้ประสบการณ์ราบรื่นยิ่งขึ้น
RouterView พร้อม v-slot
หากต้องการทำภาพเคลื่อนไหว คุณต้องเข้าถึงคอมโพเนนต์ที่แก้ไขแล้ว รูปแบบ สล็อตแบบกำหนดขอบเขตของ RouterView จะเปิดให้ใช้ Component และ route
<RouterView v-slot="{ Component }">
<component :is="Component" />
</RouterView>การครอบด้วย Transition
วาง Transition ครอบ component แบบไดนามิก Vue จะใช้คลาสสำหรับการเข้าสู่และออกจากหน้าขณะที่คอมโพเนนต์ของเส้นทางถูกเมานต์และถอดออก
<RouterView v-slot="{ Component }">
<Transition name="fade" mode="out-in">
<component :is="Component" />
</Transition>
</RouterView>เหตุใดจึงใช้ mode out-in
หากไม่มี mode หน้าเก่าและหน้าใหม่จะทำภาพเคลื่อนไหวพร้อมกันและซ้อนทับกัน mode="out-in" จะรอให้หน้าเก่าออกไปก่อนที่หน้าใหม่จะเข้าสู่หน้าจอ
การกำหนด CSS
name จะกลายเป็นคำนำหน้าของคลาส CSS กำหนดการเปลี่ยนฉากตอนเข้าและออกเพื่อสร้างเอฟเฟกต์ค่อย ๆ ปรากฏ
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>การเปลี่ยนฉากเฉพาะเส้นทางผ่านเมตา
เก็บชื่อการเปลี่ยนฉากไว้ใน meta ของเส้นทาง เพื่อให้แต่ละเส้นทางมีภาพเคลื่อนไหวแตกต่างกัน เช่น เลื่อนในส่วนหนึ่งและค่อย ๆ ปรากฏในอีกส่วนหนึ่ง
{ path: '/about', component: About, meta: { transition: 'slide' } }การคำนวณชื่อการเปลี่ยนฉาก
อ่าน route.meta.transition จากสล็อต แล้วผูกค่าเข้ากับชื่อของ Transition โดยใช้ค่าเริ่มต้นสำรอง
<RouterView v-slot="{ Component, route }">
<Transition :name="route.meta.transition || 'fade'" mode="out-in">
<component :is="Component" />
</Transition>
</RouterView>การเลื่อนตามทิศทาง
คุณสามารถเลือกการเปลี่ยนฉากแบบไดนามิกตามทิศทางการนำทางได้ เช่น เลื่อนไปทางซ้ายเมื่อเดินหน้า และเลื่อนไปทางขวาเมื่อย้อนกลับ โดยเปรียบเทียบระดับความลึกของเส้นทางในตัวป้องกัน
การเลื่อนขณะเข้าและออก
การเลื่อนประกอบด้วยความทึบและการแปลงตำแหน่ง เลื่อนหน้าที่กำลังเข้าสู่หน้าจากด้านขวา และเลื่อนหน้าที่กำลังออกไปทางซ้าย
<style>
.slide-enter-active,
.slide-leave-active {
transition: all 0.3s ease;
}
.slide-enter-from { transform: translateX(30px); opacity: 0; }
.slide-leave-to { transform: translateX(-30px); opacity: 0; }
</style>การกำหนดคีย์เมื่อพารามิเตอร์เปลี่ยน
หากเส้นทางสองเส้นทางใช้คอมโพเนนต์เดียวกัน เช่น /user/1 และ /user/2 Vue จะนำคอมโพเนนต์เดิมกลับมาใช้และข้ามการเปลี่ยนฉาก ให้เพิ่ม :key บนพาธของเส้นทางเพื่อบังคับให้เรนเดอร์และทำภาพเคลื่อนไหวใหม่
<component :is="Component" :key="route.path" />การเคารพการเคลื่อนไหวที่ลดลง
เพื่อการเข้าถึง ให้ปิดภาพเคลื่อนไหวเมื่อผู้ใช้เลือกให้ลดการเคลื่อนไหว โดยใช้มีเดียคิวรีของ CSS
<style>
@media (prefers-reduced-motion: reduce) {
.fade-enter-active, .fade-leave-active { transition: none; }
}
</style>ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความรู้เกี่ยวกับการเปลี่ยนฉากของเส้นทาง
บทสรุป
คุณได้เรียนรู้การทำภาพเคลื่อนไหวให้เส้นทางดังนี้
- ใช้ RouterView พร้อม v-slot เพื่อรับ Component และ route
- ครอบ component :is ด้วย Transition และใช้ mode="out-in"
- กำหนด CSS สำหรับการเข้าและออกโดยอ้างอิงจากชื่อการเปลี่ยนฉาก
- อ่าน route.meta.transition เพื่อทำภาพเคลื่อนไหวเฉพาะเส้นทาง และเพิ่ม :key สำหรับคอมโพเนนต์ที่ใช้ร่วมกัน
คำถามที่พบบ่อย
บทเรียน “การเปลี่ยนเส้นทางและแอนิเมชัน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเปลี่ยนเส้นทางและแอนิเมชัน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเปลี่ยนเส้นทางและแอนิเมชัน”
RouterView ร่วมกับ Transition การกำหนด transition-name ตามเส้นทาง และการเลื่อน/จางระหว่างเส้นทาง คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การเปลี่ยนเส้นทางและแอนิเมชัน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ฟิลด์เมทาของเส้นทางและการกำหนดชนิด
- การเปลี่ยนเส้นทางและแอนิเมชัน
- การกำหนดค่าพฤติกรรมการเลื่อน
- การนำทางด้วยโปรแกรมและ useRouter