อยู่ในเกณฑ์พื้นฐาน: การสร้างภาพเคลื่อนไหวของเอฟเฟกต์รายการ

Una Kravets

โพสต์ฟีเจอร์ใหม่ 4 รายการใน CSS สำหรับเอฟเฟกต์เข้าและออกได้แชร์ฟีเจอร์ที่มีประโยชน์บางอย่างที่เพิ่งพร้อมให้ใช้งานใน Chrome ตอนนี้ 2 ฟีเจอร์เหล่านี้ @starting-style และ transition-behavior: allowed-discrete ได้เปลี่ยนเป็น Baseline Newlyavailable ในการเปิดตัว Firefox 129 ตอนนี้คุณสามารถสร้างเอฟเฟกต์ภาพเคลื่อนไหวในรายการสำหรับองค์ประกอบต่างๆ รวมถึงภาพเคลื่อนไหวจาก display: none และภาพเคลื่อนไหวไปที่เลเยอร์ด้านบนได้แล้ว

การตั้งค่าเอฟเฟกต์รายการด้วย @starting-style

การรองรับเบราว์เซอร์

  • 117
  • 117
  • 129
  • 17.5

แหล่งที่มา

กฎ @starting-style จะกำหนดรูปแบบเริ่มต้นในองค์ประกอบก่อนจะแสดงผลในหน้า ซึ่งจำเป็นสำหรับองค์ประกอบที่เคลื่อนไหวเข้ามาจาก display: none เนื่องจากต้องอยู่ในสถานะที่ต้องการให้เคลื่อนไหว

ใช้ @starting-style เหมือนกับกฎแอตทริบิวต์อื่นๆ ใน CSS โดยวางรูปแบบขององค์ประกอบไว้ภายในกฎนั้น ตัวอย่างเช่น ด้วย <dialog> ให้วางรูปแบบ dialog[open] ภายในกฎ @starting-style นี่คือรูปแบบที่ใช้ก่อนที่กล่องโต้ตอบจะเปิดขึ้น

@starting-style {
  dialog[open] {
    /*   Styles before the dialog opens   */
  }
}

การเปิดใช้ภาพเคลื่อนไหวแบบข้อมูลแยกกันด้วย allow-discrete

การรองรับเบราว์เซอร์

  • 117
  • 117
  • 129
  • 17.4

แหล่งที่มา

สิ่งที่ 2 ที่จำเป็นในการรองรับภาพเคลื่อนไหวของรายการสำหรับองค์ประกอบที่เคลื่อนไหวจาก display: none เช่น กล่องโต้ตอบและป๊อปอัป คือการเปิดใช้โหมดภาพเคลื่อนไหวใหม่ เพื่อรองรับภาพเคลื่อนไหวของคุณสมบัติที่ไม่ต่อเนื่อง คุณสมบัติที่ไม่ต่อเนื่องคือคุณสมบัติที่หาค่าระหว่างค่าต่างๆ ไม่ได้ ให้ลองคิดว่าเป็นเหมือนสวิตช์เปิด/ปิด ตัวอย่างเช่น display, visibility, mix-blend-mode ซึ่งเป็นพร็อพเพอร์ตี้ใดก็ตามที่ฟีเจอร์เป็นค่าหนึ่งหรืออีกค่าหนึ่ง ด้วยโหมดภาพเคลื่อนไหวใหม่นี้ ขณะนี้เบราว์เซอร์สนับสนุนการสลับค่าที่จุด 50% แทนที่จะเป็นจุด 0% ของการเปลี่ยน

ใช้ 1 ใน 2 วิธีต่อไปนี้เพื่อให้เอฟเฟกต์รายการเคลื่อนไหวสำหรับองค์ประกอบ display: none และ visibility: hidden

  • พร็อพเพอร์ตี้แบบสแตนด์อโลน transition-behavior ที่มีค่า allow-discrete
  • ค่า allow-discrete ในชวเลขการเปลี่ยนของคุณ

เราขอแนะนำให้ใช้วิธีที่ 2 เนื่องจากการใช้ transition-behavior จะรวมอยู่ในชวเลข transition หากคุณใช้ transition-behavior: allow-discrete ก่อนทางลัดที่จะใช้ฟังก์ชันการเปลี่ยน กำหนดเวลา และการค่อยๆ เปลี่ยน เบราว์เซอร์จะไม่สนใจ transition-behavior

หากใช้วิธีนี้ในชวเลข คุณแค่ต้องใช้คีย์เวิร์ด allow-discrete กับพร็อพเพอร์ตี้ที่เฉพาะเจาะจงซึ่งต้องใช้ภาพเคลื่อนไหวแยกกันเท่านั้น ดังแสดงใน CSS ต่อไปนี้ซึ่งเปลี่ยนทั้งพร็อพเพอร์ตี้ translate และพร็อพเพอร์ตี้ display แต่ใช้เฉพาะคีย์เวิร์ด allow-discrete กับพร็อพเพอร์ตี้ display

transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

เดโม: นำข้อมูลทุกอย่างมารวมกัน

การใช้ฟีเจอร์เหล่านี้มีประโยชน์อย่างยิ่งสำหรับองค์ประกอบเลเยอร์ยอดนิยม เช่น องค์ประกอบ <dialog> หรือคอมโพเนนต์ที่ใช้แอตทริบิวต์ popover ในตัวอย่างต่อไปนี้ องค์ประกอบ <dialog> จะเคลื่อนไหวจากด้านล่างของวิวพอร์ต (เริ่มต้นจากการแปลแนวตั้งที่ 100vh นอกหน้าจอ) ไปยังกึ่งกลางของวิวพอร์ต และนำคำแปลออกเมื่อ <dialog> เปิดอยู่

/* Before the dialog opens */
@starting-style {
  dialog[open] {
  translate: 0 100vh;
  }
}

/* Dialog is-open state */
dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}

คุณเขียนเรื่องนี้ให้กระชับยิ่งขึ้นได้ด้วยการซ้อน CSS ซึ่งเป็นฟีเจอร์พื้นฐานใหม่ที่เพิ่งเปิดให้ใช้งานด้วย

การรองรับเบราว์เซอร์

  • 120
  • 120
  • 117
  • 17.2

แหล่งที่มา

dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

  @starting-style {
    translate: 0 100vh;
  }
}
สาธิตภาพเคลื่อนไหวในองค์ประกอบกล่องโต้ตอบ

บทสรุป

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

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