เลย์เอาต์ตารางกริดแบบเคลื่อนไหวใน CSS

Bramus

ใน CSS Grid พร็อพเพอร์ตี้ grid-template-columns และ grid-template-rows ช่วยให้คุณกำหนดชื่อบรรทัด และติดตามการปรับขนาดของคอลัมน์และแถวของตารางกริดได้ การรองรับการหาค่าระหว่างของพร็อพเพอร์ตี้เหล่านี้ช่วยให้เลย์เอาต์ตารางกริดเปลี่ยนสถานะได้อย่างราบรื่น แทนที่จะหยุดอยู่ที่จุดกึ่งกลางของภาพเคลื่อนไหวหรือการเปลี่ยน

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

• 107
• 107
• 66
• 16

การหาค่าเฉลี่ยของค่าใน CSS

ใน CSS คุณสามารถเปลี่ยนพร็อพเพอร์ตี้จากค่าหนึ่งไปยังอีกค่าหนึ่งได้อย่างราบรื่นโดยใช้พร็อพเพอร์ตี้ transition

#target {
  opacity: 0.5;
  transition: opacity ease-in-out 0.25s;
}

#target:hover {
  opacity: 1;
}

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

เช่น

• กำลังเปลี่ยน opacity จาก 0 เป็น 1 ใช่ไหม นั่นคือการหาค่าเฉลี่ยเชิงตัวเลข
• กำลังเปลี่ยน background-color จาก white เป็น black ใช่ไหม ค่อยๆ เปลี่ยนจากสีต้นทางเป็นสีเป้าหมาย
• การเปลี่ยน width หาค่าระหว่างจุดด้วยตัวเลข โดยแปลงหน่วยไปพร้อมกันหากจำเป็น

เช่นเดียวกับภาพเคลื่อนไหว CSS ที่เบราว์เซอร์จะทำการหาค่าเฉลี่ยระหว่างคีย์เฟรม

หมายเหตุ: เมื่อใช้พร็อพเพอร์ตี้ที่กำหนดเอง ให้ใช้ @property เพื่อระบุประเภทของพร็อพเพอร์ตี้ วิธีนี้จะช่วยให้เบราว์เซอร์ทราบวิธีเปลี่ยนจากค่าหนึ่งไปยังอีกค่าหนึ่ง

เคลื่อนไหว grid-template-columns และ grid-template-rows

เลย์เอาต์ตารางกริดยังเปลี่ยนสถานะได้อย่างราบรื่นแทนที่จะหยุดอยู่ที่จุดกึ่งกลางของภาพเคลื่อนไหวหรือการเปลี่ยนด้วย

ในการแสดงตัวอย่างต่อไปนี้ ตารางกริดจะแสดงรูปโปรไฟล์หลายรายการ ระบบจะวางรูปโปรไฟล์ซ้อนกันเพื่อประหยัดพื้นที่ โดยจำกัดความกว้างของแต่ละคอลัมน์โดยใช้ grid-template-columns เมื่อวางเมาส์เหนือ แต่ละคอลัมน์จะมีพื้นที่มากขึ้น

.avatars {
  display: grid;
  gap: 0.35em;

  grid-auto-flow: column;
  grid-template-columns: repeat(4, 2em);
  transition: all ease-in-out 0.25s;
}

.avatars:hover {
  grid-template-columns: repeat(4, 4em);
}

เมื่อใช้พร็อพเพอร์ตี้ transition ตารางกริดจะหาค่าระหว่างค่าต่างๆ ได้อย่างราบรื่น

ผลนี้มีผลกับภาพเคลื่อนไหวที่เปลี่ยนค่า grid-template-columns หรือ grid-template-rows ด้วย