การทำให้มุมมองโมดัลเคลื่อนไหว

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

Paul Lewis

ลองใช้

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

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

การวางซ้อนแบบโมดัลควรสอดคล้องกับวิวพอร์ต ดังนั้นให้ตั้งค่า position เป็น fixed:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
  opacity: 0;

  will-change: transform, opacity;
}

โดยมี opacity เริ่มต้นเป็น 0 ระบบจึงซ่อน URL ดังกล่าวไว้ไม่ให้เห็น แต่ก็ต้องตั้งค่า pointer-events เป็น none ด้วยเพื่อให้การคลิกและการแสดงผลผ่านได้ หากไม่มีการดำเนินการดังกล่าว ระบบจะบล็อกการโต้ตอบทั้งหมดและทำให้ทั้งหน้าไม่ตอบสนอง สุดท้าย เนื่องจากทำให้ opacity และ transform เคลื่อนไหว จึงต้องทำเครื่องหมายเป็น "เปลี่ยนแปลง" ด้วย will-change (ดูการใช้พร็อพเพอร์ตี้จะเปลี่ยนแปลง)

เมื่อแสดงมุมมอง จะต้องยอมรับการโต้ตอบและมี opacity เท่ากับ 1:

.modal.visible {
  pointer-events: auto;
  opacity: 1;
}

เมื่อใดก็ตามที่จำเป็นต้องใช้มุมมองโมดัลนี้ คุณสามารถใช้ JavaScript เพื่อสลับคลาส "มองเห็นได้" ดังนี้

modal.classList.add('visible');

ที่จุดนี้ มุมมองโมดัลจะปรากฏโดยไม่มีภาพเคลื่อนไหว คุณจึงเพิ่มมุมมองดังกล่าวได้ (ดูการค่อยๆ เปลี่ยนที่กำหนดเองเพิ่มเติม) ดังนี้

.modal {
  transform: scale(1.15);

  transition:
    transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

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

อย่างไรก็ตาม ระยะเวลานี้ค่อนข้างสั้น แต่ก็เหมาะที่สุดสำหรับเมื่อผู้ใช้ปิดการดูและต้องการกลับไปยังแอปของคุณ ข้อเสียคือ อาจเป็นก้าวที่มากเกินไปเมื่อการแสดงผลแบบโมดัลปรากฏขึ้น ในการแก้ไขปัญหานี้ ให้ลบล้างค่าการเปลี่ยนสำหรับคลาส visible:

.modal.visible {
  transform: scale(1);

  transition:
    transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

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