CSS Academy · บทเรียน

View Transitions API

สร้างภาพเคลื่อนไหวการเปลี่ยนผ่านของหน้าและองค์ประกอบที่ลื่นไหลด้วย CSS View Transitions API

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

ส่วนติดต่อโปรแกรมประยุกต์สำหรับการเปลี่ยนมุมมองคืออะไร

ส่วนติดต่อโปรแกรมประยุกต์สำหรับการเปลี่ยนมุมมอง (Chrome 111 ขึ้นไป) ช่วยให้เกิดการเปลี่ยนผ่านแบบเคลื่อนไหวที่ราบรื่นระหว่างสถานะต่าง ๆ ของหน้า หรือระหว่างการนำทางไปยังหน้าอื่น โดยจะจับภาพหน้าจอก่อนและหลัง แล้วทำให้ภาพเปลี่ยนรูปเข้าหากันด้วยภาพเคลื่อนไหวของ CSS จึงทำให้เว็บมีการเปลี่ยนผ่านคล้ายแอป

การเปลี่ยนผ่านภายในเอกสารเดียวกัน

เริ่มการเปลี่ยนผ่านภายในหน้าเดียวกันได้โดยครอบการอัปเดต DOM ไว้ใน document.startViewTransition(() => updateDom()) เบราว์เซอร์จะจับสถานะเก่า ดำเนินการอัปเดต จับสถานะใหม่ แล้วทำให้ภาพทั้งสองจางซ้อนกันโดยอัตโนมัติ

<button id="update-btn">Update Content</button>
<div class="content">Before update</div>

การจางซ้อนเริ่มต้น

หากไม่มี CSS ใด ๆ การเปลี่ยนมุมมองจะทำให้สถานะเก่าและใหม่ของหน้าเกิดการจางซ้อนอย่างง่าย โค้ด JavaScript เพียงบรรทัดเดียวนี้เพิ่มการเปลี่ยนผ่านที่ดูเรียบร้อย ซึ่งก่อนหน้านี้ต้องใช้การประสานภาพเคลื่อนไหว CSS ที่ซับซ้อนหรือไลบรารีภาพเคลื่อนไหวโดยเฉพาะ

องค์ประกอบเทียมของ CSS

ส่วนติดต่อโปรแกรมประยุกต์นี้เปิดให้องค์ประกอบเทียมสี่ชนิด ได้แก่ ::view-transition (ภาพซ้อนทับราก), ::view-transition-old(root) (ภาพหน้าจอของหน้าเก่า), ::view-transition-new(root) (ภาพหน้าจอของหน้าใหม่) และ ::view-transition-image-pair(root) คุณสามารถปรับแต่งองค์ประกอบเหล่านี้ด้วยภาพเคลื่อนไหว CSS

การเปลี่ยนผ่านที่มีชื่อด้วยชื่อการเปลี่ยนมุมมอง

กำหนด view-transition-name: hero-image ให้กับองค์ประกอบที่ยังคงอยู่ตลอดการเปลี่ยนผ่าน ส่วนติดต่อโปรแกรมประยุกต์จะทำให้องค์ประกอบนี้เปลี่ยนรูปจากตำแหน่งและขนาดเดิมไปยังตำแหน่งและขนาดใหม่ ซึ่งสร้างภาพเคลื่อนไหวระดับองค์ประกอบที่ราบรื่นโดยอัตโนมัติ

<div class="hero-img"></div>

ภาพเคลื่อนไหวแบบกำหนดเอง

แทนที่การจางซ้อนเริ่มต้นด้วยคีย์เฟรมแบบกำหนดเองบนองค์ประกอบเทียม ให้ภาพเลื่อนเข้าจากด้านขวาเมื่อนำทางไปข้างหน้า และเลื่อนเข้าจากด้านซ้ายเมื่อย้อนกลับ กำหนดเป้าหมายที่ ::view-transition-new(root) และ ::view-transition-old(root) ด้วย @keyframes

การเปลี่ยนผ่าน MPA (ส่วนติดต่อโปรแกรมประยุกต์สำหรับการนำทาง)

การเปลี่ยนมุมมองข้ามเอกสาร (Chrome 126 ขึ้นไป) จะสร้างภาพเคลื่อนไหวระหว่างการนำทางไปยังหน้าเต็มหน้าในแอปหลายหน้า เพิ่ม @view-transition { navigation: auto; } ลงใน CSS แล้วเบราว์เซอร์จะจัดการการเปลี่ยนผ่านระหว่างหน้า HTML โดยอัตโนมัติ ไม่จำเป็นต้องใช้ JavaScript

การเข้าถึง: เคารพการตั้งค่าการเคลื่อนไหว

ผู้ใช้ที่มีความผิดปกติของระบบทรงตัวไม่ควรต้องพบกับการเปลี่ยนผ่านที่มีการเคลื่อนไหวมาก ห่อภาพเคลื่อนไหวของการเปลี่ยนผ่านไว้ใน @media (prefers-reduced-motion: no-preference) เพื่อปิดภาพเคลื่อนไหวแบบกำหนดเองสำหรับผู้ใช้ที่ต้องการลดการเคลื่อนไหว พร้อมคงการอัปเดต DOM ที่ทำงานได้ตามปกติ

<p>This rule targets browser-generated <code>::view-transition-old(root)</code> and <code>::view-transition-new(root)</code> pseudo-elements &mdash; visible only during an active view transition, not in a static preview.</p>

การผสานรวม SPA กับเฟรมเวิร์ก

React Router v6.4 ขึ้นไป, Vue Router และ Astro รองรับการเปลี่ยนมุมมอง เฟรมเวิร์กจะครอบการเปลี่ยนเส้นทางไว้ใน startViewTransition โดยอัตโนมัติ กำหนดสไตล์การเปลี่ยนผ่านแยกตามเส้นทางด้วยชื่อการเปลี่ยนมุมมองบนองค์ประกอบที่คงอยู่ เช่น การนำทางและโครงร่างเค้าโครง

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

การเปลี่ยนมุมมองจะจับภาพหน้าจอของหน้า ซึ่งอาจใช้ทรัพยากรมากสำหรับเค้าโครงที่ซับซ้อน หน้าใหญ่ที่มีชั้นซึ่งประกอบภาพจำนวนมากอาจแสดงอาการกระตุกขณะจับภาพ ควรรักษาระยะเวลาการเปลี่ยนผ่านให้ต่ำกว่า 300 มิลลิวินาที และหลีกเลี่ยงการเปลี่ยนผ่านโครงสร้างย่อยที่ซับซ้อนมาก

การเพิ่มความสามารถแบบค่อยเป็นค่อยไป

ตรวจสอบความพร้อมใช้งานของส่วนติดต่อโปรแกรมประยุกต์ก่อนใช้งาน: if (!document.startViewTransition) { updateDom(); return; } ทางเลือกสำรองจะอัปเดต DOM ตามปกติโดยไม่มีภาพเคลื่อนไหว การเปลี่ยนมุมมองเป็นการเพิ่มความสามารถแบบค่อยเป็นค่อยไป แอปยังทำงานได้แม้ไม่มีคุณสมบัตินี้ และคุณสมบัตินี้เพียงช่วยปรับปรุงประสบการณ์เมื่อเบราว์เซอร์รองรับ

ตรวจสอบความรู้

การกำหนดชื่อการเปลี่ยนมุมมองให้กับองค์ประกอบช่วยให้ทำสิ่งใดได้ระหว่างการเปลี่ยนมุมมอง

สรุป

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

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

บทเรียน “View Transitions API” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “View Transitions API”

สร้างภาพเคลื่อนไหวการเปลี่ยนผ่านของหน้าและองค์ประกอบที่ลื่นไหลด้วย CSS View Transitions API คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “View Transitions API” ใช้เวลานานแค่ไหน

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

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

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

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

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