การเปลี่ยนฉากมีประโยชน์มากมายสำหรับผู้ใช้ รวมถึงช่วยให้อยู่ในบริบทและลดการรับรู้ถึงเวลาในการตอบสนอง นักพัฒนาซอฟต์แวร์ต้องการความสามารถในการสร้างการเปลี่ยนหน้าไปมาที่ราบรื่นซึ่งช่วยเพิ่มการมีส่วนร่วมของผู้ใช้กับเว็บไซต์
อย่างไรก็ตาม การเปิดใช้การเปลี่ยนสถานะเป็นการดำเนินการที่ยากมากเนื่องจากนักพัฒนาซอฟต์แวร์ต้องจัดการสถานะขององค์ประกอบ 2 อย่างที่แตกต่างกัน แม้แต่การเฟดอย่างง่ายๆ ก็ทำให้ทั้ง 2 สถานะแสดงพร้อมกัน ซึ่งส่งผลให้เกิดความท้าทายด้านการใช้งาน เช่น การจัดการการโต้ตอบเพิ่มเติมกับองค์ประกอบขาออก สำหรับผู้ใช้อุปกรณ์อำนวยความสะดวก จะมีช่วงเวลาที่ทั้งสถานะก่อนและหลังใน DOM เกิดขึ้นพร้อมกัน นอกจากนี้ สิ่งต่างๆ อาจเคลื่อนที่ไปรอบๆ ต้นไม้ในแบบที่มองเห็นได้ชัด แต่ก็อาจทำให้ตำแหน่งการอ่านและการโฟกัสหายไปได้ง่ายๆ
View Transitions API ที่เปิดตัวใน Chrome 111 ช่วยให้คุณสร้างการเปลี่ยนหน้าไปมาได้อย่างราบรื่นและง่ายดาย ซึ่งช่วยให้คุณเปลี่ยนแปลง DOM โดยไม่ทับซ้อนกันระหว่างสถานะ และสร้างภาพเคลื่อนไหวการเปลี่ยนระหว่างสถานะโดยใช้มุมมองแบบรวม
คุณอาจสงสัยว่าการนำไปใช้นั้นง่ายเพียงใด มีกรณีการใช้งานแบบใดบ้าง นักพัฒนาซอฟต์แวร์รายอื่นๆ ใช้การเปลี่ยนมุมมองอย่างไร
บทความนี้จะอธิบายขั้นตอนการติดตั้งใช้งานการเปลี่ยนมุมมองใน 4 เว็บไซต์ ได้แก่ RedBus (ท่องเที่ยว), CyberAgent (ผู้เผยแพร่ข่าว/บล็อก), Nykaa (อีคอมเมิร์ซ) และ PolicyBazaar (การประกัน) และประโยชน์ที่เว็บไซต์ได้รับในแบบต่างๆ ด้วยการใช้ View Transitions API
redBus
RedBus เป็นส่วนหนึ่งของกลุ่ม MakeMyTrip เป็นเว็บไซต์การจองรถบัสและจำหน่ายตั๋วที่มีสำนักงานใหญ่ในบังคาลอร์ ประเทศอินเดีย และดำเนินธุรกิจในหลายภูมิภาคทั่วโลก ซึ่งเป็นหนึ่งในเว็บไซต์แรกๆ ที่นำประสบการณ์การใช้งานด้วย View Transitions API มาใช้งาน
ทำไม Redbus จึงใช้การเปลี่ยนมุมมอง
ทีมของ RedBus เชื่อมั่นอย่างยิ่งในการมอบประสบการณ์การใช้งานเว็บที่เป็นหนึ่งเดียวในแอป ซึ่งใกล้เคียงกับแอปที่มาพร้อมเครื่องมากที่สุด ที่จริงแล้วบริษัทได้นำโซลูชันที่กำหนดเองมาปรับใช้มากมายตลอดหลายปีที่ผ่านมา ตัวอย่างเช่น บริษัทได้เปิดตัวภาพเคลื่อนไหวที่ปรับแต่งตาม JavaScript และ CSS สำหรับการเปลี่ยนหน้าตั้งแต่ก่อนที่จะมีการพัฒนา View Transitions API มาก่อน อย่างไรก็ตาม นั่นหมายความว่าบริษัทต้องรับมือกับการจัดการประสิทธิภาพในกลุ่มเครือข่ายและอุปกรณ์ที่ต่ำกว่า ซึ่งนำไปสู่ประสบการณ์การใช้งานที่แตกต่างด้วยกลยุทธ์การโหลดแบบปรับเปลี่ยนได้
redBus ใช้การเปลี่ยนมุมมองสำหรับเส้นทางของผู้ใช้หลายคน ตัวอย่างเช่น ในส่วน "การแก้ปัญหาด้วยตนเอง" ภายในแอปบนอุปกรณ์เคลื่อนที่ซึ่งเปิดหน้าเว็บในแท็บ Chrome ที่กำหนดเอง และใน Funnel การจองตั๋วรถบัสซึ่งผู้ใช้ไปยังหน้าข้อมูลสินค้าคงคลังไปยังหน้าการชำระเงิน ในกรณีหลัง การดูการเปลี่ยนหน้าไปยังหน้าต่างๆ ที่ไปยังส่วนต่างๆ ได้ราบรื่นยิ่งขึ้น และส่งผลให้อัตรา Conversion เพิ่มขึ้น ซึ่งเป็นผลมาจากประสบการณ์ของผู้ใช้ที่ดีขึ้นและประสิทธิภาพที่รับรู้ได้ที่ดีขึ้น ในขณะที่ดำเนินการหนักๆ เช่น การดึงข้อมูลพื้นที่โฆษณาที่พร้อมให้บริการล่าสุด
รายละเอียดทางเทคนิคในการใช้งาน
RedBus ใช้ React และ EJS เป็นชุดซอฟต์แวร์เทคโนโลยีฟรอนท์เอนด์ โดยใช้การผสมผสานระหว่าง SPA และ MPA ในเส้นทางที่แตกต่างกัน ตัวอย่างโค้ดต่อไปนี้แสดงวิธีใช้การเปลี่ยนมุมมอง
/* Forward Transition */
export const goToURL = ( url: string , reactHistory: any ): void => {
if(document.startViewTransition) {
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
})
} else {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
}
};
/* Back Transition */
export const goBack = ( reactHistory: any ): void => {
if(document.startViewTransition) {
document.documentElement.classList.add('back-transition');
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.goBack() : history.back();
})
viewTransition.finished.finally(() => {
document.documentElement.classList.remove('back-transition');
})
} else {
reactHistory ? reactHistory.goBack() : history.back();
}
};
ใน CSS ต่อไปนี้ slide-to-right, slide-to-left, slide-from-right และ slide-from-left เป็นคีย์เฟรมภาพเคลื่อนไหว CSS
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.back-transition::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
.back-transition::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}
ผลกระทบทางธุรกิจ
RedBus เลือกใช้การเปลี่ยนการแสดงผล พร้อมกับปรับปรุง INP ทั่วทั้งเว็บไซต์ ซึ่งทำให้ยอดขายเพิ่มขึ้น 7% Amit Kumar ผู้จัดการฝ่ายวิศวกรรมอาวุโสของ RedBus กล่าวว่าการเปลี่ยนมุมมองนั้นยอดเยี่ยมมากสำหรับผู้ที่ต้องการประสบการณ์ของผู้ใช้ที่ดีขึ้นอย่างแท้จริงและต้องการค่าใช้จ่ายในการบำรุงรักษาน้อยลง
เราได้จัดทำเซสชันแสดงความคิดเห็นที่ครอบคลุมจากผู้ใช้ โดยนำข้อมูลเชิงลึกที่มีประโยชน์จากกลุ่มผู้ใช้ที่หลากหลายมาใช้ ความเข้าใจอย่างลึกซึ้งของเราเกี่ยวกับฐานผู้ใช้ (รถประจำทางและรถไฟ) รวมถึงความต้องการของพวกเขาประกอบกับความเชี่ยวชาญของเรา ทำให้เราเชื่อว่าฟีเจอร์นี้จะให้คุณค่าที่สำคัญตั้งแต่แรก โดยไม่จำเป็นต้องทดสอบ A/B การเปลี่ยนมุมมองเป็นขั้นตอนหนึ่งในการเชื่อมช่องว่างระหว่างแอปและเว็บด้วยประสบการณ์การนำทางที่ราบรื่น
Anoop Menon ประธานเจ้าหน้าที่ฝ่ายเทคโนโลยีของ RedBus
CyberAgent
CyberAgent เป็นบริษัทไอทีในญี่ปุ่นที่ให้บริการออนไลน์มากมาย รวมถึงการเผยแพร่บล็อกและข่าว
ทำไม CyberAgent จึงใช้การเปลี่ยนมุมมอง
CyberAgent ได้พิจารณาการใช้ภาพเคลื่อนไหว CSS หรือใช้เฟรมเวิร์กเพื่อใช้การเปลี่ยนแบบเคลื่อนไหวเพื่อปรับปรุงประสบการณ์ของผู้ใช้ในอดีต แต่กังวลว่าการแสดงผล DOM และการดูแลรักษาโค้ดมีประสิทธิภาพไม่ดี เมื่อ Chrome เพิ่มการรองรับ View คุณจะเปลี่ยนการใช้งานได้ ทางบริษัทก็ตื่นเต้นมากที่จะใช้ API ดังกล่าวเพื่อสร้างการเปลี่ยนหน้าที่น่าสนใจและเอาชนะความท้าทายเหล่านี้ไปได้
CyberAgent ใช้การเปลี่ยนมุมมองระหว่างรายชื่อบล็อกและหน้าบล็อก ให้ดูวิธีที่นักพัฒนาซอฟต์แวร์เพิ่มการเปลี่ยนผ่านองค์ประกอบไปยังรูปภาพหลัก คุณเข้าชมเว็บไซต์และสัมผัสประสบการณ์การใช้งานจริงได้แล้ววันนี้
นอกจากนี้ยังใช้คำค้นหาสื่อเพื่อออกแบบประสบการณ์ภาพเคลื่อนไหวที่แตกต่างกันสำหรับอุปกรณ์แต่ละชนิดอีกด้วย หน้าเว็บในอุปกรณ์เคลื่อนที่มีการเปลี่ยนองค์ประกอบ แต่เอฟเฟกต์นี้มีการเคลื่อนไหวมากเกินไปสำหรับเดสก์ท็อป
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
รายละเอียดทางเทคนิคในการใช้งาน
CyberAgent ใช้ Next.js เพื่อสร้าง SPA ตัวอย่างโค้ดต่อไปนี้แสดงวิธีที่พวกเขาใช้ View Transition API
export const usePageTransition = () => {
const router = useRouter();
const defferedRef = useRef<Deferred | null>(null);
useEffect(() => {
const handleRouteChangeComplete = () => {
defferedRef.current?.resolve();
};
const handleRouteChangeStart = (url: string) => {
if (!("startViewTransition" in document)) return;
if (router.asPath === url) return;
const deffered = new Deferred();
defferedRef.current = deffered;
(document as Document).startViewTransition(async () => {
await deffered.promise;
});
};
router.events.on("routeChangeStart", handleRouteChangeStart);
router.events.on("routeChangeComplete", handleRouteChangeComplete);
return () => {
router.events.off("routeChangeStart", handleRouteChangeStart);
router.events.off("routeChangeComplete", handleRouteChangeComplete);
};
}, [router.asPath]);
};
ดูโค้ด Next.js ตัวอย่างเพิ่มเติม
ดูการเปลี่ยนสำหรับ MPA ด้วยเทคโนโลยีการแสดงผลล่วงหน้า
CyberAgent ยังได้ลองใช้ View Transitions API for Multiple Page Apps (MPA) (ปัจจุบันอยู่ภายใต้การแฟล็ก chrome://flags/#view-transition-on-navigation) ในบริการชื่อ Ameba News ซึ่งเป็นเว็บไซต์พอร์ทัลข่าวสารด้วย
มีการใช้การเปลี่ยนมุมมองใน 2 ที่ ที่แรกคือเมื่อเปลี่ยนหมวดหมู่ของข่าว ซึ่งแสดงในวิดีโอต่อไปนี้
ส่วนที่ 2 คือระหว่างหน้าไฮไลต์ของข่าว ซึ่งเป็นส่วนที่ตัดตอนมาจากเนื้อหา และเมื่อผู้ใช้คลิกเพื่อดูรายละเอียดเพิ่มเติม ส่วนที่เหลือของบทความจะค่อยๆ ปรากฏขึ้น
สิ่งที่น่าสนใจคือทีมได้เพิ่มภาพเคลื่อนไหวเฉพาะในส่วนที่จะมีการเปลี่ยนแปลงหลังจากที่คลิกปุ่มดังกล่าวเท่านั้น การปรับเปลี่ยนการออกแบบภาพเคลื่อนไหวเล็กน้อยนี้ทำให้หน้า MPA มีลักษณะคล้ายกับ SPA มากขึ้นจากมุมมองของผู้ใช้ โดยจะมีเพียงเนื้อหาใหม่เท่านั้นที่เคลื่อนไหวในส่วนต่อไปนี้
โดยมีวิธีการดังนี้: กำหนด view-transition-name ที่แตกต่างกันให้กับส่วนต่างๆ ของหน้า ตัวอย่างเช่น มีการกำหนด view-transition-name ให้กับส่วนบนสุดของบทความ กำหนดอีกภาพหนึ่งไว้ที่ส่วนล่าง และไม่เพิ่มภาพเคลื่อนไหวในส่วนบน
::view-transition-old(root) {
animation:
var(--animation-disappear-duration) var(--animation-disappear-easing) both fade-out;
}
::view-transition-new(root) {
animation:
var(--animation-appear-in-duration) var(--animation-appear-in-easing) both fade-in;
}
สิ่งที่น่าสนใจอีกอย่างเกี่ยวกับการใช้ API การเปลี่ยนมุมมองของ CyberAgent คือที่พวกเขาใช้ลิงก์ด่วนเพื่อนำกฎการแสดงผลล่วงหน้าไปใช้ในหน้ารายละเอียด นี่คือโค้ดตัวอย่าง
import { prerender } from ‘https://.../quicklink.mjs’;
window.addEventListener('load', () => {
const match = location.pathname.match(/\\/(.+)\\/hl\\/([0-9a-z-_]+)/);
if (!match) return;
const [_, dirname, entryId] = match;
prerender(`/${dirname}/${entryId}/`);
});
คุณอ่านข้อมูลเพิ่มเติมเกี่ยวกับการใช้งานลิงก์ด่วนได้จากบทความนี้
คำนิยม
Kazunari Hara หัวหน้าฝ่ายเทคโนโลยีของบริการ Ameba ใน CyberAgent กล่าวว่าการเปลี่ยนผ่านมุมมองอาจมีผลกระทบอย่างมากต่อธุรกิจด้วยเหตุผล 2 ประการ
อย่างแรก ส่วนขยายประเภทนี้จะแนะแนวทางผู้ใช้ในหน้าเว็บ การเปลี่ยนมุมมองช่วยให้ผู้ใช้มองเห็นข้อความที่สำคัญที่สุดอย่างชัดเจน และช่วยให้ผู้ใช้ได้รับประโยชน์สูงสุดจากหน้าเว็บ ทั้งยังช่วยเสริมและเน้นแบรนด์ด้วยภาพเคลื่อนไหว CyberAgent มีการออกแบบภาพเคลื่อนไหวที่กำหนดเพื่อสื่อสารแบรนด์ของตน การเปลี่ยนมุมมองจะทำให้สามารถใช้ประสบการณ์ที่แสดงแบรนด์นี้ได้โดยไม่ต้องเพิ่มค่าใช้จ่ายในการดูแลรักษาไลบรารีภายนอก
ดูการเปลี่ยนภาพเป็นหนึ่งใน API ที่ฉันชอบ ความสามารถในการเพิ่มภาพเคลื่อนไหวเป็นฟีเจอร์เบราว์เซอร์มาตรฐานทำให้ใช้งานและดูแลรักษาการเปลี่ยนมุมมองได้ง่ายขึ้นเมื่อเทียบกับโซลูชันอื่นๆ ที่อาศัยไลบรารี เรารอคอยที่จะใช้การเปลี่ยนมุมมองเป็นบริการอื่นๆ เพื่อสื่อสารถึงแบรนด์ของเรา
Kazunari Hara ประธานเจ้าหน้าที่ฝ่ายเทคโนโลยีของ Ameba
Nykaa
Nykaa เป็นแพลตฟอร์มอีคอมเมิร์ซด้านแฟชั่นและความงามที่ใหญ่ที่สุดในอินเดีย โดยมีจุดประสงค์ที่จะทำให้ประสบการณ์การใช้งานเว็บบนอุปกรณ์เคลื่อนที่ใกล้เคียงกับประสบการณ์การใช้งานแอปที่มาพร้อมเครื่องมากที่สุด หากก่อนหน้านี้พยายามใช้ภาพเคลื่อนไหวในการเปลี่ยนภาพ ก็พบปัญหาในการเขียน JavaScript ที่กำหนดเองที่ซับซ้อน ทั้งยังส่งผลกระทบต่อประสิทธิภาพของเว็บไซต์เพียงเล็กน้อยด้วย
ทำไม Nykaa จึงใช้การเปลี่ยนมุมมอง
เมื่อได้เปลี่ยนมุมมอง ทีมของ Nykaa ก็มองเห็นโอกาสที่การเปลี่ยนเหล่านี้ใช้งานได้ตั้งแต่แรก ส่งผลให้ UX ของการเปลี่ยนหน้าได้รับการปรับปรุงขึ้นอย่างมากโดยไม่มีค่าใช้จ่ายใดๆ ต่อประสิทธิภาพ Nykaa กำลังใช้การเปลี่ยนมุมมองเพื่อเปลี่ยนจากหน้ารายละเอียดผลิตภัณฑ์ไปยังหน้าข้อมูลผลิตภัณฑ์ที่แสดง
รายละเอียดทางเทคนิคในการใช้งาน
Nykaa ใช้ React และ Emotion เพื่อสร้าง SPA ดูโค้ดตัวอย่างเพิ่มเติมเกี่ยวกับวิธีใช้ "ดูการเปลี่ยนภาพด้วย React" ได้ที่นี่
if (document.startViewTransition) {
document.startViewTransition(() => {
history.push(productUrl);
});
} else {
history.push(productUrl);
}
const fadeIn = keyframes`
from { opacity: 0; }
`;
const fadeOut = keyframes`
to { opacity: 0; }
`;
const slideFromRight = keyframes`
from { transform: translateX(300px); }
`;
const slideToLeft = keyframes`
to { transform: translateX(-300px); }
`;
const slideToRight = keyframes`
to { transform: translateX(300px); }
`;
const slideFromLeft = keyframes`
from { transform: translateX(-300px); }
`
CSS สำหรับภาพเคลื่อนไหวที่ลิ้นชักด้านข้าง:
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both ${fadeOut},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideToLeft};
}
::view-transition-new(root) {
animation: 400ms cubic-bezier(0, 0, 0.2, 1) 300ms both ${fadeIn},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideFromRight};
}
.back-transition {
display: inherit;
}
.back-transition::view-transition-old(root) {
animation-name: fade-out, ${slideToRight};
}
.back-transition::view-transition-new(root) {
animation-name: fade-in, ${slideFromLeft};
}
คำนิยม
Sunit Jindal หัวหน้าทีมแอปที่ Nykaa กล่าวว่าประโยชน์ที่สำคัญที่สุดของการเปลี่ยนมุมมองคือ "การรับรู้ความเร็ว" Nykaa ใช้เอฟเฟกต์แวววาวเพื่อรอให้เนื้อหาโหลดจากแบ็กเอนด์ แต่พบว่าการแสดงเอฟเฟกต์ที่วาววับไม่ได้ช่วยให้ผู้ใช้ทราบว่าต้องรอนานแค่ไหนก่อนที่จะโหลดเนื้อหา ในส่วนของการเปลี่ยนมุมมอง การเปลี่ยนนั้นทำให้ผู้ใช้รู้สึกว่า "กำลังจะมีบางอย่างเกิดขึ้น" ทำให้การรอดูยุ่งยากน้อยลง
Nykaa รู้สึกตื่นเต้นมากกับ UX ที่ปรับปรุงใหม่สำหรับหน้าเว็บพร้อมการเปลี่ยนมุมมอง และพร้อมที่จะใช้การเปลี่ยนการดูในหน้าอื่นๆ เพิ่มเติมด้วย รองประธานฝ่ายออกแบบได้กล่าวไว้ดังนี้
เราให้คำมั่นสัญญาที่จะใช้การเปลี่ยนมุมมองในฟีเจอร์ที่กำลังจะมีขึ้นทั้งหมดตามความเหมาะสม เราได้ระบุพื้นที่บางส่วนแล้วและทีมกำลังลงทุนอย่างเต็มที่
Krishna R V รองประธานฝ่ายออกแบบ
PolicyBazaar
PolicyBazaar มีสำนักงานใหญ่ตั้งอยู่ในคุร์เคาน์ บริษัทรวบรวมประกันภัยและบริษัทเทคโนโลยีการเงินข้ามชาติที่ใหญ่ที่สุดในอินเดีย
เหตุใด PolicyBazaar จึงใช้การเปลี่ยนมุมมอง
ในฐานะบริษัทที่เน้นเว็บเป็นหลัก ทีม PolicyBazaar มุ่งมั่นที่จะมอบประสบการณ์ที่ดีที่สุดแก่ผู้ใช้ตลอดเส้นทางของผู้ใช้ที่สำคัญ แนวทางปฏิบัติทั่วไปคือการติดตั้งใช้งานการเปลี่ยนที่กำหนดเองโดยใช้ JavaScript และ CSS ก่อนที่จะเปิดตัว View Transitions API เนื่องจาก API ดังกล่าวช่วยปรับปรุงประสบการณ์ของผู้ใช้ สร้างขั้นตอนการนำทางที่ราบรื่น และปรับปรุงความน่าสนใจในภาพรวมของเว็บไซต์
อย่างไรก็ตาม การติดตั้งที่กำหนดเองเหล่านี้ก็มีความล่าช้าเป็นครั้งคราวตามประสิทธิภาพ ความซับซ้อนของการบำรุงรักษาโค้ด และความเข้ากันได้ที่ต่ำกว่ามาตรฐานสำหรับเฟรมเวิร์กที่ใช้ View Transitions API ช่วยให้องค์กรเอาชนะความท้าทายส่วนใหญ่เหล่านี้ได้ ด้วยอินเทอร์เฟซที่ใช้งานง่ายพร้อมประโยชน์ด้านประสิทธิภาพที่มีให้อยู่แล้ว
PolicyBazaar ใช้มุมมองการเปลี่ยนผ่านองค์ประกอบต่างๆ ในเส้นทางก่อนการเสนอราคาเพื่อสร้างความตื่นเต้นสำหรับผู้มีโอกาสเป็นผู้ซื้อในการให้รายละเอียดที่จำเป็นสำหรับการซื้อกรมธรรม์ประกันภัย
รายละเอียดทางเทคนิคในการใช้งาน
พวกเขาใช้แนวทางเฟรมเวิร์กแบบผสมที่มี Angular และ React ครองตำแหน่งโค้ดเบสส่วนใหญ่ นี่คือ VT ที่ตัดตอนมาจากโค้ดซึ่งเขียนใน Angular และแชร์โดย Aman Soni (Lead Frontend Developer ของ PolicyBazaar)
toggleWidgetAnimation() {
let doc:any = document;
if (!doc.startViewTransition) {
this.toggleWidget();
return;
}
doc.startViewTransition(() => this.toggleWidget());
}
toggleWidget() {
let badgeEle = document.querySelector('.animate_init_state_one');
let textEle = document.querySelector('.animate_init_state_two');
badgeEle.classList.toggle('hide');
textEle.classList.toggle('hide');
}
คำนิยม
Rishabh Mehrotra หัวหน้าฝ่ายออกแบบ (Life BU) กล่าวว่าการเปลี่ยนผ่านการดูมีบทบาทสำคัญในการปรับปรุงประสบการณ์การใช้งานเว็บไซต์ของผู้ใช้โดยการปรับปรุงความสามารถในการใช้งาน การมีส่วนร่วม และความพึงพอใจโดยรวม โดยช่วยให้การนำทางเป็นไปอย่างราบรื่น การโต้ตอบแบบมีคำแนะนำ การลดภาระของการรับรู้ สุนทรียศาสตร์สมัยใหม่ และอื่นๆ อีกมากมาย
การยกระดับประสบการณ์การใช้งานเว็บถือเป็นวัตถุประสงค์สำคัญสำหรับ PB และ VT ได้พิสูจน์แล้วว่าเป็นเครื่องมือที่ช่วยให้บรรลุเป้าหมายนี้ได้อย่างราบรื่นไม่มีสะดุด การดึงดูดผู้ชมในวงกว้างทั้งในชุมชนนักพัฒนาซอฟต์แวร์และฐานผู้ใช้ของเราทำให้ทีมของเรากระตือรือร้น เนื่องจากเราพิจารณาการผสานรวมกับ POD ที่หลากหลาย จึงคาดว่าจะส่งผลดีในวงกว้างต่อระดับความพึงพอใจและความเป็นเลิศในการดำเนินการ
Saurabh Tiwari (CTO ของ PolicyBazaar)
ขั้นตอนถัดไป
คุณสนใจลองใช้การเปลี่ยนมุมมองไหม โปรดดูแหล่งข้อมูลต่อไปนี้เพื่อเรียนรู้เพิ่มเติม