ไปยังส่วนต่างๆ ได้อย่างราบรื่นด้วยการเปลี่ยนมุมมอง

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

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

View Transitions API ที่เปิดตัวใน Chrome 111 ช่วยให้คุณสร้างการเปลี่ยนหน้าเว็บได้อย่างราบรื่นและง่ายดาย ซึ่งช่วยให้คุณเปลี่ยนแปลง DOM โดยไม่ทับซ้อนกันระหว่างสถานะได้ และสร้างภาพเคลื่อนไหวการเปลี่ยนระหว่างสถานะโดยใช้มุมมองแบบรวม

คุณอาจสงสัยว่าใช้งานได้ง่ายเพียงใด กรณีการใช้งานมีประเภทใดบ้าง นักพัฒนาซอฟต์แวร์รายอื่นๆ ใช้การเปลี่ยนมุมมองอย่างไร

บทความนี้จะอธิบายการใช้งาน View Transitions ในเว็บไซต์ 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 Transitions API แล้ว ทีมก็ตื่นเต้นที่จะใช้ 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 แห่ง ที่แรกคือเมื่อเปลี่ยนหมวดหมู่ของข่าว ซึ่งแสดงในวิดีโอต่อไปนี้

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

สิ่งที่น่าสนใจคือมีการเพิ่มภาพเคลื่อนไหวในส่วนที่จะเปลี่ยนแปลงไปหลังจากคลิกปุ่มเท่านั้น การปรับแต่งการออกแบบภาพเคลื่อนไหวเล็กน้อยนี้ทำให้หน้า 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 เนื่องจากช่วยปรับปรุงประสบการณ์ของผู้ใช้ สร้างเส้นทางการนําทางที่ราบรื่น และปรับปรุงภาพรวมของเว็บไซต์ให้น่าสนใจยิ่งขึ้น

อย่างไรก็ตาม การใช้งานที่กําหนดเองเหล่านี้ทําให้เกิดความล่าช้าตามประสิทธิภาพเป็นครั้งคราว ความซับซ้อนในการดูแลรักษาโค้ด และความเข้ากันได้ที่ไม่เหมาะสมกับเฟรมเวิร์กที่ใช้ View Transitions API ช่วยให้พวกเขาเอาชนะปัญหาเหล่านี้ได้ส่วนใหญ่ด้วยอินเทอร์เฟซที่ใช้งานง่ายพร้อมด้วยประโยชน์ด้านประสิทธิภาพที่พร้อมใช้งานตั้งแต่ต้น

PolicyBazaar ใช้การเปลี่ยนมุมมองในองค์ประกอบต่างๆ ในเส้นทางก่อนขอใบเสนอราคาเพื่อให้ผู้มีโอกาสเป็นผู้ซื้อตื่นเต้นที่จะให้รายละเอียดที่จำเป็นสำหรับการซื้อนโยบายประกัน

รายละเอียดทางเทคนิคของการใช้งาน

โดยใช้แนวทางเฟรมเวิร์กแบบผสมที่มี Angular และ React เป็นโค้ดเบสส่วนใหญ่ ต่อไปนี้คือ VT ที่ตัดตอนมาจากโค้ดที่เขียนด้วย Angular และแชร์โดย Aman Soni (นักพัฒนาส่วนหน้าระดับอาวุโสของ 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)

ขั้นตอนถัดไป

คุณสนใจลองใช้ทรานซิชันของมุมมองไหม โปรดดูแหล่งข้อมูลต่อไปนี้เพื่อเรียนรู้เพิ่มเติม

• เอกสารเกี่ยวกับการเปลี่ยนมุมมองจากdeveloper.chrome.com
• ดูการเปลี่ยนสำหรับคำอธิบาย MPA
• ข้อเสนอการทํางานร่วมกันเพื่อทําให้การเปลี่ยนมุมมองพร้อมใช้งานในเบราว์เซอร์ต่างๆ