การเปลี่ยนมุมมองเป็นการเปลี่ยนแบบภาพเคลื่อนไหวและที่ราบรื่นระหว่างสถานะต่างๆ ของหน้าเว็บหรือ UI ของแอปพลิเคชัน View Transitions API ออกแบบมาเพื่อให้คุณสร้างเอฟเฟกต์เหล่านี้ได้ด้วยวิธีที่เรียบง่ายและมีประสิทธิภาพมากขึ้นกว่าที่เคย API นี้มีข้อดีมากกว่าวิธี JavaScript ก่อนหน้านี้ ได้แก่
- ประสบการณ์ของผู้ใช้ที่ดีขึ้น: การเปลี่ยนฉากและภาพที่ลื่นไหลจะนำทางผู้ใช้ ผ่านการเปลี่ยนแปลงใน UI ซึ่งทำให้ผู้ใช้ดูเป็นธรรมชาติและน่ากลัวน้อยลง
- ความต่อเนื่องของภาพ: การรักษาความต่อเนื่องระหว่างมุมมองจะช่วยลดความยุ่งยากและช่วยให้ผู้ใช้มีสมาธิกับการทำงานภายในแอปพลิเคชัน
- ประสิทธิภาพ: API จะพยายามใช้ทรัพยากรเทรดหลักให้น้อยที่สุดเท่าที่จะทำได้ซึ่งจะทำให้ภาพเคลื่อนไหวราบรื่นขึ้น
- สวยงามทันสมัย: การเปลี่ยนที่ได้รับการปรับปรุงจะช่วยมอบประสบการณ์ของผู้ใช้ที่สวยงามและน่าสนใจ
โพสต์นี้เป็นส่วนหนึ่งของซีรีส์ที่จะกล่าวถึงวิธีที่บริษัทอีคอมเมิร์ซปรับปรุงเว็บไซต์โดยใช้ฟีเจอร์ CSS และ UI ใหม่ ในบทความนี้ คุณจะได้ทราบวิธีที่บริษัทบางแห่งใช้งานและได้รับประโยชน์จาก View Transitions API
redBus
redBus พยายามสร้างความเท่าเทียมระหว่างประสบการณ์ในการใช้งานแบบเนทีฟและบนเว็บให้มากที่สุดเท่าที่จะเป็นไปได้ ก่อนที่จะใช้ View Transitions API การนำภาพเคลื่อนไหวเหล่านี้ ไปใช้กับเนื้อหาเว็บนั้นเป็นเรื่องที่ท้าทาย แต่เมื่อใช้ API เราพบว่าการสร้างการเปลี่ยนเส้นทางของผู้ใช้หลายๆ แบบ ช่วยให้ทำเว็บได้เหมือนแอปมากขึ้น ทั้งหมดนี้ควบคู่กับประโยชน์ด้านประสิทธิภาพที่ทำให้ทุกเว็บไซต์ต้องมีฟีเจอร์ Amit Kumar ผู้จัดการอาวุโสฝ่ายวิศวกรรมของ redBus
ทีมของเราได้ใช้การเปลี่ยนมุมมองในหลายจุด นี่คือตัวอย่างการผสมกันระหว่างภาพเคลื่อนไหวแบบเฟดเข้าและเลื่อนแบบเป็นภาพเคลื่อนไหวในไอคอนการเข้าสู่ระบบในหน้าแรก
รหัส
การใช้งานนี้ใช้ภาพเคลื่อนไหวview-transition-name
และภาพเคลื่อนไหวที่กำหนดเองหลายรายการ (scale-down
และ scale-up
) การใช้ view-transition-name
ที่มีค่าที่ไม่ซ้ำกันจะแยกคอมโพเนนต์การลงชื่อเข้าใช้ออกจากส่วนที่เหลือของหน้าเพื่อทำให้เคลื่อนไหวแยกกัน การสร้าง view-transition-name
ใหม่ที่ไม่ซ้ำกันยังจะสร้าง ::view-transition-group
ใหม่ในโครงสร้างองค์ประกอบจำลอง (แสดงในโค้ดต่อไปนี้) ทำให้ปรับแต่งแยกต่างหากจากค่าเริ่มต้น ::view-transition-group(root)
ได้
::view-transition
├─::view-transition-group(root)
│ └─…
├─::view-transition-group(signin)
│ └─…
└─::view-transition-group(signinclose)
└─…
//Code for VT for login
if (!document.startViewTransition) {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
} else {
const transition = document.startViewTransition();
transition.ready.finally(() => {
setTimeout(() => {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
}, 500);
});
}
.signin_open {
view-transition-name: signin;
}
.signin_close {
view-transition-name: signinclose;
}
::view-transition-group(signin),
::view-transition-group(signinclose) {
animation-duration: 0.5s;
}
::view-transition-old(signin) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
::view-transition-new(signin) {
animation-name: -ua-view-transition-fade-in, scale-up;
}
::view-transition-new(signinclose) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
@keyframes scale-down {
to {
scale: 0;
}
}
@keyframes scale-up {
from {
scale: 0;
}
}
โทโกพีเดีย
ทีมใช้การเปลี่ยนมุมมองเพื่อเพิ่มภาพเคลื่อนไหวแบบจางลงเมื่อผู้ใช้สลับระหว่างภาพขนาดย่อของผลิตภัณฑ์
การนำไปใช้นั้นง่ายมาก การใช้
startViewTransition
ทำให้เราได้การเปลี่ยนแบบเฟดอย่างน่าพอใจขึ้นทันทีเมื่อเทียบกับการติดตั้งใช้งานก่อนหน้านี้โดยไม่มีผลกระทบใดๆ คุณ Andy Wihalim วิศวกรซอฟต์แวร์ระดับอาวุโสของ Tokopedia
ก่อน
หลัง
รหัส
โค้ดต่อไปนี้ใช้เฟรมเวิร์ก React และมีโค้ดเฉพาะเฟรมเวิร์ก เช่น flushSync.
อ่านเพิ่มเติมเกี่ยวกับการทำงานกับเฟรมเวิร์กเพื่อใช้การเปลี่ยนมุมมอง
นี่คือการใช้งานพื้นฐานซึ่งจะตรวจสอบว่าเบราว์เซอร์รองรับ startViewTransition
หรือไม่ และหากรองรับ จะมีการเปลี่ยนผ่าน ไม่เช่นนั้นก็จะกลับไปใช้การทำงานตามค่าเริ่มต้น
const handleClick =
({ url, index }) =>
() => {
if ('startViewTransition' in document) { //check if browser supports VT
document.startViewTransition(() => {
flushSync(() => {
setDisplayImage({ url, index });
setActiveImageIndex(index);
});
});
} else { //if VT is not supported, fall back to default behavior
setDisplayImage({ url, index });
setActiveImageIndex(index);
}
};
...
<Thumbnail onClick={handleClick({url, index})} />
นโยบายบาซาร์
ประเภทธุรกิจการลงทุนของ Policybazaar ได้ใช้ View Transitions API เกี่ยวกับองค์ประกอบเคล็ดลับความช่วยเหลือ เช่น "ทำไมควรซื้อ" ซึ่งช่วยดึงดูดสายตาและปรับปรุงการใช้งานฟีเจอร์ดังกล่าว
ด้วยการรวม "มุมมองการเปลี่ยน" เราได้ขจัดโค้ด CSS และ JavaScript ที่ซ้ำกัน ซึ่งมีหน้าที่จัดการภาพเคลื่อนไหวในสถานะต่างๆ ซึ่งช่วยประหยัดความพยายามในการพัฒนาและปรับปรุงประสบการณ์ของผู้ใช้ได้อย่างมาก Aman Soni, Tech Lead, Policybazaar
รหัส
โค้ดต่อไปนี้คล้ายกับตัวอย่างก่อนหน้านี้ สิ่งหนึ่งที่ควรทราบคือสามารถลบล้างรูปแบบและภาพเคลื่อนไหวเริ่มต้นของ ::view-transition-old(root)
และ::view-transition-new(root)
ได้ ในกรณีนี้ animation-duration
จะอัปเดตเป็น 0.4 วินาที
togglePBAdvantagePopup(state: boolean) {
this.showPBAdvantagePopup = state;
if(!document.startViewTransition) {
changeState();
return;
}
document.startViewTransition(() => {changeState();});
function changeState() {
document.querySelector('.block_section').classList.toggle('hide');
document.querySelector('.righttoggle_box').classList.toggle('show');
}
}
.righttoggle_box{
view-transition-name: advantage-transition;
}
.block_section{
view-transition-name: advantage-transition;
}
::view-transition-old(root), ::view-transition-new(root) {
animation-duration: 0.4s;
}
สิ่งที่ควรพิจารณาเมื่อใช้ View Transitions API
เมื่อใช้เอฟเฟกต์การเปลี่ยนมุมมองหลายรายการในหน้าเดียวกัน โปรดตรวจสอบว่าคุณได้ใช้ชื่อ view-transition-name ที่แตกต่างกันสำหรับแต่ละเอฟเฟกต์หรือส่วนเพื่อป้องกันข้อขัดแย้ง
ขณะที่การเปลี่ยนมุมมองทำงานอยู่ (กำลังเปลี่ยน) จะมีการเพิ่มเลเยอร์ใหม่ที่ด้านบนของ UI ที่เหลือ ดังนั้น ให้หลีกเลี่ยงการทริกเกอร์การเปลี่ยนเมื่อวางเมาส์เหนือเนื่องจากเหตุการณ์ mouseLeave
จะทริกเกอร์โดยไม่คาดคิด (เมื่อเคอร์เซอร์จริงยังไม่ได้เคลื่อนไหว)
แหล่งข้อมูล
- การเปลี่ยนผ่านที่ราบรื่นและง่ายดายด้วย View Transitions API
- คำอธิบาย: ดูการเปลี่ยนสำหรับ MPA
- กรณีศึกษา: การนำทางที่ราบรื่นใช้การเปลี่ยนมุมมองได้
- กรณีศึกษา: เว็บทำอะไรได้บ้าง | แสดงการนำทางที่เหมือนกับแอป
- ข้อเสนอการทำงานร่วมกัน: ทำให้การเปลี่ยน View ใช้งานได้ในเบราว์เซอร์ต่างๆ
- คุณต้องการรายงานข้อบกพร่องหรือขอฟีเจอร์ใหม่ เราต้องการรับฟังความคิดเห็นของคุณเกี่ยวกับ SPA และ MPA
อ่านบทความอื่นๆ ในชุดนี้ที่กล่าวถึงประโยชน์ที่ได้จากการใช้ฟีเจอร์ CSS และ UI ใหม่ๆ เช่น ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน การแสดงหน้าต่างป็อปโอเวอร์ การค้นหาคอนเทนเนอร์ และตัวเลือก has()