M

MLOG

ไทย

เรียนรู้ CSS View Transitions API อย่างเชี่ยวชาญเพื่อสร้างการเปลี่ยนหน้าเว็บที่ราบรื่นและน่าดึงดูดใจ เพิ่มประสบการณ์ผู้ใช้และประสิทธิภาพด้วยแอนิเมชันที่ลื่นไหล

ยกระดับประสบการณ์ผู้ใช้: คู่มือฉบับสมบูรณ์สำหรับ CSS View Transitions API

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

CSS View Transitions API คืออะไร?

CSS View Transitions API เป็นวิธีการที่เป็นมาตรฐานในการสร้างแอนิเมชันสำหรับการเปลี่ยนแปลงภาพที่เกิดขึ้นเมื่อมีการนำทางระหว่างสถานะต่างๆ ในเว็บแอปพลิเคชัน ลองนึกถึงวิธีการจัดการเอฟเฟกต์ภาพ เช่น การเฟด การสไลด์ และเอฟเฟกต์อื่นๆ อย่างราบรื่นเมื่อเนื้อหาบนหน้าจออัปเดต ก่อนที่จะมี API นี้ นักพัฒนามักจะใช้ไลบรารี JavaScript และ CSS แอนิเมชันที่ซับซ้อนเพื่อให้ได้ผลลัพธ์ที่คล้ายกัน ซึ่งอาจยุ่งยากและนำไปสู่ปัญหาด้านประสิทธิภาพ View Transitions API นำเสนอแนวทางที่คล่องตัวและมีประสิทธิภาพมากกว่า

แนวคิดหลักเบื้องหลัง API นี้คือการจับภาพสถานะ "ก่อน" และ "หลัง" ของ DOM (Document Object Model) แล้วสร้างแอนิเมชันเพื่อแสดงความแตกต่างระหว่างสองสถานะนี้ เบราว์เซอร์จะจัดการงานหนักในการสร้างแอนิเมชัน ทำให้นักพัฒนาไม่ต้องเขียนโค้ดแอนิเมชันที่ซับซ้อนด้วยตนเอง สิ่งนี้ไม่เพียงแต่ทำให้กระบวนการพัฒนาง่ายขึ้น แต่ยังช่วยให้มั่นใจได้ว่าการเปลี่ยนผ่านจะราบรื่นและมีประสิทธิภาพมากขึ้นอีกด้วย

ทำไมต้องใช้ CSS View Transitions API?

มันทำงานอย่างไร?

CSS View Transitions API เกี่ยวข้องกับฟังก์ชัน JavaScript หลักเพียงฟังก์ชันเดียวคือ `document.startViewTransition()` ฟังก์ชันนี้รับ callback เป็นอาร์กิวเมนต์ ภายใน callback นี้ คุณจะทำการอัปเดต DOM ที่แสดงถึงการเปลี่ยนผ่านระหว่างมุมมองต่างๆ เบราว์เซอร์จะจับภาพสถานะ "ก่อน" และ "หลัง" ของ DOM โดยอัตโนมัติและสร้างแอนิเมชันการเปลี่ยนผ่าน

นี่คือตัวอย่างแบบง่าย:


  function updateContent(newContent) {
    document.startViewTransition(() => {
      // Update the DOM with the new content
      document.querySelector('#content').innerHTML = newContent;
    });
  }

เรามาดูรายละเอียดของโค้ดนี้กัน:

  1. `updateContent(newContent)`: ฟังก์ชันนี้รับเนื้อหาใหม่ที่จะแสดงเป็นอาร์กิวเมนต์
  2. `document.startViewTransition(() => { ... });`: นี่คือหัวใจของ API มันบอกให้เบราว์เซอร์เริ่มการเปลี่ยนผ่านมุมมอง ฟังก์ชันที่ส่งผ่านเป็นอาร์กิวเมนต์ไปยัง `startViewTransition` จะถูกดำเนินการ
  3. `document.querySelector('#content').innerHTML = newContent;`: ภายใน callback คุณจะอัปเดต DOM ด้วยเนื้อหาใหม่ นี่คือที่ที่คุณทำการเปลี่ยนแปลงหน้าเว็บที่คุณต้องการให้มีแอนิเมชัน

เบราว์เซอร์จะจัดการส่วนที่เหลือเอง โดยจะจับภาพสถานะของ DOM ก่อนและหลังการอัปเดต `innerHTML` และสร้างการเปลี่ยนผ่านที่ราบรื่นระหว่างสองสถานะ

ตัวอย่างการใช้งานเบื้องต้น

นี่คือตัวอย่างที่สมบูรณ์ยิ่งขึ้นพร้อมด้วย HTML, CSS และ JavaScript:

HTML (index.html):





  
  
  View Transitions Demo
  


  

  

    
Home

    
Welcome to the home page!

CSS (style.css):


body {
  font-family: sans-serif;
  margin: 20px;
}

nav {
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  margin-right: 10px;
}

button:hover {
  background-color: #3e8e41;
}

/* Styles for the transitioning elements */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}

::view-transition-old(root) {
  animation-name: fadeOut;
}

::view-transition-new(root) {
  animation-name: fadeIn;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

JavaScript (script.js):


const contentDiv = document.getElementById('content');
const navButtons = document.querySelectorAll('nav button');

const pages = {
  home: '
Home
Welcome to the home page!
',
  about: '
About
Learn more about us.
',
  contact: '
Contact
Get in touch with us.
',
};

function updateContent(target) {
  document.startViewTransition(() => {
    contentDiv.innerHTML = pages[target];
    document.documentElement.scrollTop = 0; // Reset scroll position
  });
}

navButtons.forEach(button => {
  button.addEventListener('click', (event) => {
    const target = event.target.dataset.target;
    updateContent(target);
  });
});

ในตัวอย่างนี้ การคลิกปุ่มนำทางจะทำให้เกิดการเปลี่ยนผ่านแบบเฟดเมื่อเนื้อหาอัปเดต CSS จะกำหนดแอนิเมชัน `fadeIn` และ `fadeOut` และ JavaScript จะใช้ `document.startViewTransition` เพื่อจัดการการเปลี่ยนผ่าน

เทคนิคขั้นสูงและการปรับแต่ง

CSS View Transitions API มีฟีเจอร์ขั้นสูงหลายอย่างสำหรับการปรับแต่งการเปลี่ยนผ่าน:

1. การเปลี่ยนผ่านแบบระบุชื่อ (Named Transitions)

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

HTML:


Image 1

CSS:


::view-transition-group(hero-image) {
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
}

โค้ดนี้กำหนดชื่อ `hero-image` ให้กับรูปภาพ จากนั้น CSS จะกำหนดเป้าหมายไปยังกลุ่มการเปลี่ยนผ่านนี้โดยเฉพาะเพื่อใช้แอนิเมชันที่กำหนดเอง pseudo-element `::view-transition-group()` ช่วยให้คุณสามารถจัดรูปแบบองค์ประกอบที่กำลังเปลี่ยนผ่านได้

2. คุณสมบัติ view-transition-name

คุณสมบัติ CSS นี้ช่วยให้คุณสามารถกำหนดชื่อให้กับองค์ประกอบที่จะเข้าร่วมในการเปลี่ยนผ่านมุมมองได้ เมื่อองค์ประกอบสองชิ้นในหน้าต่างกันมี `view-transition-name` เหมือนกัน เบราว์เซอร์จะพยายามสร้างการเปลี่ยนผ่านที่ราบรื่นระหว่างองค์ประกอบทั้งสอง สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับการสร้าง shared element transitions ซึ่งองค์ประกอบดูเหมือนจะเคลื่อนที่จากหน้าหนึ่งไปยังอีกหน้าหนึ่งได้อย่างราบรื่น

3. การควบคุมด้วย JavaScript

แม้ว่า API จะขับเคลื่อนโดย CSS เป็นหลัก แต่คุณยังสามารถใช้ JavaScript เพื่อควบคุมกระบวนการเปลี่ยนผ่านได้ ตัวอย่างเช่น คุณสามารถฟังสัญญาณอีเวนต์ `view-transition-ready` เพื่อดำเนินการก่อนที่การเปลี่ยนผ่านจะเริ่มขึ้น หรืออีเวนต์ `view-transition-finished` เพื่อรันโค้ดหลังจากการเปลี่ยนผ่านเสร็จสิ้น


document.startViewTransition(() => {
  // Update the DOM
  return Promise.resolve(); // Optional: Return a promise
}).then((transition) => {
  transition.finished.then(() => {
    // Transition finished
    console.log('Transition complete!');
  });
});

คุณสมบัติ `transition.finished` จะคืนค่า promise ที่จะ resolve เมื่อการเปลี่ยนผ่านเสร็จสิ้น ซึ่งช่วยให้คุณสามารถดำเนินการต่างๆ เช่น การโหลดเนื้อหาเพิ่มเติมหรืออัปเดต UI หลังจากแอนิเมชันสิ้นสุดลง

4. การจัดการกับการทำงานแบบ Asynchronous

เมื่อทำการอัปเดต DOM ภายใน callback ของ `document.startViewTransition()` คุณสามารถคืนค่า Promise เพื่อให้แน่ใจว่าการเปลี่ยนผ่านจะไม่เริ่มจนกว่าการทำงานแบบ asynchronous จะเสร็จสิ้น สิ่งนี้มีประโยชน์สำหรับสถานการณ์ที่คุณต้องดึงข้อมูลจาก API ก่อนที่จะอัปเดต UI


function updateContent(newContent) {
  document.startViewTransition(() => {
    return fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        // Update the DOM with the fetched data
        document.querySelector('#content').innerHTML = data.content;
      });
  });
}

5. การปรับแต่ง CSS Transitions

พลังที่แท้จริงของ View Transitions API อยู่ที่ความสามารถในการปรับแต่งการเปลี่ยนผ่านด้วย CSS คุณสามารถใช้ CSS animations และ transitions เพื่อสร้างเอฟเฟกต์ได้หลากหลาย เช่น การเฟด, การสไลด์, การซูม และอื่นๆ ลองทดลองกับคุณสมบัติ CSS ต่างๆ เพื่อให้ได้เอฟเฟกต์ภาพที่ต้องการ

CSS:


::view-transition-old(root) {
  animation: slideOut 0.5s ease-in-out forwards;
}

::view-transition-new(root) {
  animation: slideIn 0.5s ease-in-out forwards;
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideOut {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

ตัวอย่างนี้สร้างเอฟเฟกต์การเปลี่ยนผ่านแบบเลื่อน

ความเข้ากันได้ของเบราว์เซอร์และ Polyfills

CSS View Transitions API เป็นฟีเจอร์ที่ค่อนข้างใหม่ ดังนั้นการสนับสนุนของเบราว์เซอร์ยังคงมีการพัฒนาอยู่ ณ ปลายปี 2023 Chrome และ Edge มีการสนับสนุนที่ดี Firefox และ Safari กำลังดำเนินการเพื่อนำมาใช้ ก่อนที่จะใช้ API ในการใช้งานจริง สิ่งสำคัญคือต้องตรวจสอบความเข้ากันได้ของเบราว์เซอร์ในปัจจุบันและพิจารณาใช้ polyfill สำหรับเบราว์เซอร์รุ่นเก่า polyfill คือโค้ด JavaScript ที่ให้ฟังก์ชันการทำงานของฟีเจอร์ใหม่ในเบราว์เซอร์รุ่นเก่าที่ไม่สนับสนุนโดยกำเนิด

คุณสามารถใช้ polyfill เช่น ตัวนี้บน GitHub เพื่อให้การสนับสนุนสำหรับเบราว์เซอร์ที่ยังไม่มีการสนับสนุนเนทีฟ อย่าลืมทดสอบแอปพลิเคชันของคุณอย่างละเอียดในเบราว์เซอร์ต่างๆ เพื่อให้แน่ใจว่าผู้ใช้จะได้รับประสบการณ์ที่สอดคล้องกัน

แนวทางปฏิบัติที่ดีที่สุดและข้อควรพิจารณา

กรณีการใช้งานและตัวอย่าง

CSS View Transitions API สามารถใช้ได้ในสถานการณ์ต่างๆ เพื่อปรับปรุงประสบการณ์ของผู้ใช้:

ข้อควรพิจารณาระดับสากล

เมื่อนำ View Transitions API ไปใช้ในเว็บไซต์ที่เข้าถึงได้ทั่วโลก ให้พิจารณาสิ่งต่อไปนี้:

บทสรุป

CSS View Transitions API เป็นเครื่องมือที่ทรงพลังในการยกระดับประสบการณ์ของผู้ใช้และสร้างเว็บแอปพลิเคชันที่น่าดึงดูดยิ่งขึ้น ด้วยการทำให้กระบวนการสร้างการเปลี่ยนผ่านที่ราบรื่นและสวยงามง่ายขึ้น API นี้ช่วยให้นักพัฒนาสามารถมุ่งเน้นไปที่การส่งมอบประสบการณ์โดยรวมที่ดีขึ้นสำหรับผู้ใช้ของตนได้ แม้ว่าการสนับสนุนจากเบราว์เซอร์ยังคงมีการพัฒนาอยู่ แต่ประโยชน์ที่เป็นไปได้ของ View Transitions API นั้นชัดเจน เมื่อ API ได้รับการยอมรับอย่างกว้างขวางมากขึ้น ก็มีแนวโน้มที่จะกลายเป็นเครื่องมือที่จำเป็นในชุดเครื่องมือของนักพัฒนา front-end โอบรับเทคโนโลยีใหม่นี้และยกระดับเว็บแอปพลิเคชันของคุณไปอีกขั้น

โดยการทำความเข้าใจแนวคิดและเทคนิคที่ระบุไว้ในคู่มือนี้ คุณสามารถเริ่มใช้ CSS View Transitions API เพื่อสร้างเว็บแอปพลิเคชันที่สวยงามและน่าดึงดูดยิ่งขึ้นได้ ทดลองกับการเปลี่ยนผ่านที่แตกต่างกัน ปรับแต่งให้เข้ากับความต้องการเฉพาะของคุณ และให้ความสำคัญกับประสบการณ์ผู้ใช้และการเข้าถึงได้เสมอ View Transitions API เป็นเครื่องมือที่ทรงพลังที่สามารถช่วยคุณสร้างเว็บแอปพลิเคชันที่ทั้งสวยงามและใช้งานได้ดีเยี่ยม