การเปลี่ยนมุมมองเป็นการเปลี่ยนแบบเคลื่อนไหวที่ราบรื่นระหว่างสถานะต่างๆ ของหน้าเว็บหรือ UI ของแอปพลิเคชัน View Transition API ได้รับการออกแบบมาเพื่อช่วยให้คุณสร้างเอฟเฟกต์เหล่านี้ด้วยวิธีที่เรียบง่ายและมีประสิทธิภาพมากขึ้นกว่าที่เคย API นี้มีประโยชน์มากกว่าแนวทาง JavaScript แบบเดิมหลายประการ เช่น
- ประสบการณ์ของผู้ใช้ที่ดีขึ้น: การเปลี่ยนอย่างลื่นไหลและสัญลักษณ์ที่แสดงภาพจะนำทางผู้ใช้ผ่านการเปลี่ยนแปลงใน UI ทำให้การนำทางดูเป็นธรรมชาติและน่ารำคาญน้อยลง
- ความต่อเนื่องของภาพ: การรักษาความรู้สึกต่อเนื่องระหว่างการดูจะช่วยลดภาระทางความคิดและช่วยให้ผู้ใช้มีสมาธิจดจ่ออยู่กับแอปพลิเคชัน
- ประสิทธิภาพ: API จะพยายามใช้ทรัพยากรเทรดหลักให้น้อยที่สุดเท่าที่จะทำได้ เพื่อสร้างภาพเคลื่อนไหวที่ราบรื่นยิ่งขึ้น
- สวยงามทันสมัย: การเปลี่ยนที่ดีขึ้นช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่สมบูรณ์และน่าสนใจ
โพสต์นี้เป็นส่วนหนึ่งของซีรีส์ที่จะพูดถึงวิธีที่บริษัทอีคอมเมิร์ซปรับปรุงเว็บไซต์ของตนโดยใช้ฟีเจอร์ใหม่ของ CSS และ UI ในบทความนี้ คุณจะได้ทราบเหตุผลที่บริษัทใช้งาน View Transition API มาประยุกต์ใช้
redBus
RedBus พยายามสร้างความเท่าเทียมให้ประสบการณ์ในการใช้งานแบบเนทีฟและเว็บมากที่สุดเท่าที่จะเป็นไปได้มาโดยตลอด ก่อนที่จะใช้ View Transition 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 Transition API กับองค์ประกอบเคล็ดลับความช่วยเหลือ เช่น "ทำไมต้องซื้อ" จึงทำให้ดึงดูดสายตาและปรับปรุงการใช้งานฟีเจอร์ดังกล่าว
การรวมการเปลี่ยนผ่านมุมมองช่วยกำจัดโค้ด CSS และ JavaScript ที่ซ้ำกันซึ่งมีหน้าที่จัดการภาพเคลื่อนไหวในหลายๆ สถานะ ช่วยประหยัดเวลาในการพัฒนาและยกระดับประสบการณ์ของผู้ใช้ได้อย่างมาก Aman Soni หัวหน้าฝ่ายเทคโนโลยีของ 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 Transition API
เมื่อใช้เอฟเฟกต์การเปลี่ยนมุมมองหลายรายการในหน้าเดียวกัน โปรดตรวจสอบว่าคุณมีชื่อการเปลี่ยนมุมมองที่แตกต่างกันสําหรับเอฟเฟกต์หรือส่วนแต่ละรายการเพื่อป้องกันข้อขัดแย้ง
ขณะที่การเปลี่ยนมุมมองทำงานอยู่ (การเปลี่ยน) ระบบจะเพิ่มเลเยอร์ใหม่ที่ด้านบนของ UI ที่เหลือ ดังนั้น โปรดหลีกเลี่ยงการทริกเกอร์การเปลี่ยนเมื่อวางเมาส์เหนือ เนื่องจากเหตุการณ์ mouseLeave
จะทริกเกอร์โดยไม่คาดคิด (เมื่อเคอร์เซอร์จริงยังไม่เคลื่อนที่)
แหล่งข้อมูล
- การเปลี่ยนราบรื่นและง่ายด้วย View Transition API
- คำอธิบาย: ดูการเปลี่ยนภาพสำหรับ MPA
- กรณีศึกษา: การนำทางที่ราบรื่นเกิดขึ้นได้ด้วยการเปลี่ยนมุมมอง
- กรณีศึกษา: เว็บทำอะไรได้บ้าง | แสดงการนำทางที่คล้ายแอป
- ข้อเสนอการทำงานร่วมกัน: ทำให้การเปลี่ยนมุมมองใช้งานได้ในเบราว์เซอร์ต่างๆ
- คุณต้องการรายงานข้อบกพร่องหรือขอฟีเจอร์ใหม่ เราอยากฟังความคิดเห็นจากคุณเกี่ยวกับ SPA และ MPA
อ่านบทความอื่นๆ ในชุดนี้ ซึ่งพูดถึงวิธีที่บริษัทอีคอมเมิร์ซได้รับประโยชน์จากการใช้ฟีเจอร์ใหม่ของ CSS และ UI เช่น ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน ป๊อปอัป การค้นหาคอนเทนเนอร์ และตัวเลือก has()