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

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

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

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

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

บทความนี้จะอธิบายการใช้งานการเปลี่ยนมุมมองใน 4 เว็บไซต์ต่างๆ ได้แก่ RedBus (ท่องเที่ยว), CyberAgent (ผู้เผยแพร่ข่าว/บล็อก), Nykaa (อีคอมเมิร์ซ) และ PolicyBazaar (ประกันภัย) รวมถึงประโยชน์ที่เว็บไซต์ของตนได้รับในลักษณะต่างๆ โดยใช้ View Transitions API

redBus

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

::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;
}

สิ่งที่น่าสนใจอีกอย่างเกี่ยวกับการใช้ View Transits API ของ CyberAgent ก็คือการใช้ quicklink เพื่อนำกฎการแสดงผลล่วงหน้าในหน้ารายละเอียดได้อย่างง่ายดาย นี่คือโค้ดตัวอย่าง

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}/`);
  });

อ่านข้อมูลเพิ่มเติมเกี่ยวกับการใช้งาน Quick Link ได้จากบทความนี้

คำนิยม

Kazuroi Hara หัวหน้าฝ่ายเทคโนโลยีของบริการ Ameba ใน CyberAgent กล่าวว่าการเปลี่ยนมุมมองอาจส่งผลต่อธุรกิจอย่างมากด้วยเหตุผล 2 ประการ

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

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

Kazunari Hara, CTO ของ Ameba

ไนกา

Nykaa เป็นแพลตฟอร์มอีคอมเมิร์ซด้านแฟชั่นและความงามที่ใหญ่ที่สุดของอินเดีย โดยมุ่งหวังที่จะมอบประสบการณ์การใช้งานเว็บบนอุปกรณ์เคลื่อนที่ให้ใกล้เคียงกับประสบการณ์ในแอปที่มาพร้อมเครื่องที่สุดเท่าที่จะทำได้ เมื่อพยายามใช้ภาพเคลื่อนไหวการเปลี่ยน ก่อนหน้านี้พบว่าเขียน JavaScript ที่กำหนดเองซึ่งมีความซับซ้อน ซึ่งส่งผลต่อประสิทธิภาพของเว็บไซต์เพียงเล็กน้อย

เหตุใด Nykaa จึงใช้การเปลี่ยนมุมมอง

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

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

Nykaa ใช้ React และ Emotion ในการสร้าง SPA ดูโค้ดตัวอย่างเพิ่มเติมเกี่ยวกับวิธีใช้ "View Transitions with 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 มีสำนักงานใหญ่ตั้งอยู่ที่เมือง Gurgaon และเป็นบริษัทผู้รวบรวมข้อมูลประกันภัยและบริษัทเทคโนโลยีการเงินข้ามชาติที่ใหญ่ที่สุดในอินเดีย

เหตุใด 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
• ข้อเสนอการทำงานร่วมกันเพื่อให้การเปลี่ยนมุมมองพร้อมใช้งานในเบราว์เซอร์ต่างๆ