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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

redBus

RedBus พยายามสร้างความเท่าเทียมระหว่างโฆษณาเนทีฟกับเว็บมาโดยตลอด ให้ได้มากที่สุด ก่อนใช้ View Transition API การใช้ ภาพเคลื่อนไหวในเนื้อหาเว็บ นั้นทำได้ยากมาก แต่การใช้ API ทำให้เราพบ สร้างการเปลี่ยนผ่านได้หลายเส้นทางของผู้ใช้เพื่อทำให้เว็บ คล้ายแอปมากขึ้น ทั้งหมดนี้ประกอบกับประโยชน์ด้านประสิทธิภาพต่างๆ ต้องมีคุณลักษณะสำหรับทุกเว็บไซต์— 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;
 }
}

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 ให้มากยิ่งขึ้น ได้ใช้ View Transition 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 Transition API

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

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

แหล่งข้อมูล

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

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

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