การสร้าง Transition แบบแปรรูป
สร้าง transition ที่แปรรูปองค์ประกอบจากรูปร่างหรือตำแหน่งหนึ่งไปเป็นอีกแบบ
การสร้าง Transition แบบแปรรูป เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
แนวคิดการแปรรูป
ทรานซิชันแบบแปรรูปจะเปลี่ยนองค์ประกอบจากรูปร่างหรือตำแหน่งหนึ่งไปเป็นอีกแบบอย่างราบรื่น
อ่านสถานะเริ่มต้น
วัดเลย์เอาต์เริ่มต้นขององค์ประกอบโดยใช้ getBoundingClientRect
คำนวณความแตกต่าง
เปรียบเทียบตำแหน่งเริ่มต้นกับตำแหน่งเป้าหมายเพื่อหาค่าทรานส์ฟอร์ม
ใช้ทรานส์ฟอร์ม
ส่งคืนฟังก์ชัน css ที่ค่อย ๆ เปลี่ยนค่าจากสถานะเริ่มต้นไปยังสถานะสุดท้าย
css: (t) => `transform: scale(${1 - (1 - t)}); opacity: ${t};`รูปแบบคล้าย FLIP
รูปแบบนี้คล้ายกับเทคนิค FLIP ที่ animate:flip ใช้
ทรานซิชันขององค์ประกอบร่วม
สำหรับองค์ประกอบร่วมกันระหว่างเส้นทางการนำทาง คลังอย่าง svelte-shared-transitions ช่วยจัดการได้
กรอบขอบเขต
คำนวณการปรับขนาดและการเลื่อนตำแหน่งเพื่อแปรรูประหว่างตำแหน่งต่าง ๆ
ส่วนติดต่อเบราว์เซอร์
View Transitions API ช่วยให้ใช้ทรานซิชันขององค์ประกอบร่วมแบบเนทีฟได้ และ Svelte ทำงานร่วมกับสิ่งนี้ได้ดี
ประสิทธิภาพ
ใช้ transform และ opacity เป็นหลัก และหลีกเลี่ยงการทำแอนิเมชันกับคุณสมบัติที่กำหนดเรขาคณิต
รวมการปรับความเร่ง
ใช้ฟังก์ชันการปรับความเร่งเพื่อให้ความรู้สึกเป็นธรรมชาติ โดย cubic-bezier เหมาะอย่างยิ่งสำหรับการแปรรูป
การใช้งานจริง
โมดัลเปิดจากปุ่มที่คลิก รายการในรายการขยายเป็นมุมมองรายละเอียด และทรานซิชันระหว่างเส้นทางการนำทาง
ตรวจสอบอย่างรวดเร็ว
คุณสมบัติใดเหมาะที่สุดสำหรับการแปรรูป
สรุปทบทวน
ทรานซิชันแบบแปรรูปจะวัดตำแหน่งเริ่มต้นและสิ้นสุด แล้วค่อย ๆ เปลี่ยนค่าด้วยสตริง css ที่อิงกับ transform
คำถามที่พบบ่อย
บทเรียน “การสร้าง Transition แบบแปรรูป” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การสร้าง Transition แบบแปรรูป” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การสร้าง Transition แบบแปรรูป”
สร้าง transition ที่แปรรูปองค์ประกอบจากรูปร่างหรือตำแหน่งหนึ่งไปเป็นอีกแบบ คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การสร้าง Transition แบบแปรรูป” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การเขียนฟังก์ชัน Transition กำหนดเอง
- พารามิเตอร์ Transition: node duration delay
- การสร้าง Transition แบบแปรรูป
- Transition แบบ CSS กับ JS