หน้านี้ได้รับการแปลโดย Cloud Translation API

ดูกรณีศึกษาเกี่ยวกับการเปลี่ยน

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

Browser Support

Source

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

redBus

redBus พยายามสร้างความเท่าเทียมระหว่างประสบการณ์การใช้งานแอปและเว็บให้ได้มากที่สุดมาโดยตลอด ก่อนที่จะมี View Transition API การใช้ภาพเคลื่อนไหวเหล่านี้ ในชิ้นงานบนเว็บของเราเป็นเรื่องที่ท้าทาย แต่เมื่อใช้ API เราพบว่าการสร้างทรานซิชันในเส้นทางของผู้ใช้หลายเส้นทางเพื่อทำให้ประสบการณ์การใช้งานเว็บ ดูเหมือนแอปมากขึ้นนั้นเป็นเรื่องง่าย ทั้งหมดนี้รวมกับประโยชน์ด้านประสิทธิภาพทำให้ฟีเจอร์นี้เป็นฟีเจอร์ที่เว็บไซต์ทุกเว็บไซต์ควรมี - Amit Kumar ผู้จัดการอาวุโสด้านวิศวกรรมของ redBus

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

เปลี่ยนฉากแบบจางและเลื่อนเข้าเมื่อผู้ใช้คลิกไอคอนเข้าสู่ระบบ ในหน้าแรกของ 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;
 }
}

Tokopedia

ทีมใช้การเปลี่ยนมุมมองเพื่อเพิ่มภาพเคลื่อนไหวแบบจางเมื่อผู้ใช้สลับ ระหว่างภาพปกผลิตภัณฑ์

การติดตั้งใช้งานนั้นง่ายมาก เมื่อใช้ 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

กลุ่มธุรกิจการลงทุน ของ Policybazaar ใช้ View Transition API กับองค์ประกอบเคล็ดลับความช่วยเหลือ เช่น "เหตุผลที่ควรซื้อ" ซึ่งทำให้องค์ประกอบเหล่านั้นดูน่าสนใจและปรับปรุงการใช้งานฟีเจอร์ดังกล่าว

การใช้การเปลี่ยนมุมมองช่วยให้เราไม่ต้องใช้โค้ด CSS และ JavaScript ที่ซ้ำกันซึ่งมีหน้าที่จัดการภาพเคลื่อนไหวในสถานะต่างๆ ซึ่งช่วยประหยัด ความพยายามในการพัฒนาและปรับปรุงประสบการณ์ของผู้ใช้ได้อย่างมาก - Aman Soni หัวหน้าฝ่ายเทคโนโลยีของ Policybazaar

ดูภาพเคลื่อนไหวของการเปลี่ยนฉากใน CTA "เหตุผลที่ควรซื้อจาก 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

เมื่อใช้เอฟเฟกต์การเปลี่ยนมุมมองหลายรายการในหน้าเดียวกัน ให้ตรวจสอบว่าคุณมี view-transition-name ที่แตกต่างกันสำหรับแต่ละเอฟเฟกต์หรือส่วนเพื่อป้องกัน ความขัดแย้ง

ขณะที่การเปลี่ยนมุมมองทำงานอยู่ (กำลังเปลี่ยน) ระบบจะเพิ่มเลเยอร์ใหม่ที่ด้านบนของ UI ที่เหลือ ดังนั้น ให้หลีกเลี่ยงการทริกเกอร์การเปลี่ยนเมื่อวางเมาส์ เนื่องจากmouseLeaveเหตุการณ์จะทริกเกอร์โดยไม่คาดคิด (เมื่อเคอร์เซอร์จริงยังไม่เคลื่อนที่)

แหล่งข้อมูล

การเปลี่ยนผ่านที่ราบรื่นและง่ายดายด้วย View Transition API
คำอธิบาย: การเปลี่ยนมุมมองสำหรับ MPA
กรณีศึกษา: การนำทางที่ราบรื่นด้วยการเปลี่ยนมุมมอง
กรณีศึกษา: เว็บทำอะไรได้บ้าง | มอบการนำทางที่เหมือนแอป
ข้อเสนอ Interop: ทำให้การเปลี่ยนฉากพร้อมใช้งานในเบราว์เซอร์ต่างๆ
คุณต้องการรายงานข้อบกพร่องหรือขอฟีเจอร์ใหม่ไหม เราอยากฟังความคิดเห็นจากคุณสำหรับ SPA และ MPA

อ่านบทความอื่นๆ ในชุดนี้ที่พูดถึงวิธีที่บริษัทอีคอมเมิร์ซ ได้รับประโยชน์จากการใช้ CSS และฟีเจอร์ UI ใหม่ๆ เช่น แอนิเมชันที่ขับเคลื่อนด้วยการเลื่อน, ป๊อปโอเวอร์, การค้นหาคอนเทนเนอร์ และตัวเลือก has()