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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

redBus

redBus พยายามสร้างความเท่าเทียมระหว่างประสบการณ์ในการใช้งานแบบเนทีฟและบนเว็บให้มากที่สุดเท่าที่จะเป็นไปได้ ก่อนที่จะใช้ View Transitions 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 Transitions API เกี่ยวกับองค์ประกอบเคล็ดลับความช่วยเหลือ เช่น "ทำไมควรซื้อ" ซึ่งช่วยดึงดูดสายตาและปรับปรุงการใช้งานฟีเจอร์ดังกล่าว

ด้วยการรวม "มุมมองการเปลี่ยน" เราได้ขจัดโค้ด CSS และ JavaScript ที่ซ้ำกัน ซึ่งมีหน้าที่จัดการภาพเคลื่อนไหวในสถานะต่างๆ ซึ่งช่วยประหยัดความพยายามในการพัฒนาและปรับปรุงประสบการณ์ของผู้ใช้ได้อย่างมาก Aman Soni, Tech Lead, 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 Transitions API

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

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

แหล่งข้อมูล

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

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

• เหตุใดความสามารถ UI ของเว็บจึงสำคัญกับเว็บไซต์อีคอมเมิร์ซของคุณ
• กรณีศึกษาเกี่ยวกับภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน
• กรณีศึกษาเกี่ยวกับ Popover API
• กรณีศึกษาเกี่ยวกับคำค้นหาคอนเทนเนอร์
• กรณีศึกษาเกี่ยวกับตัวเลือก:has()