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

Bramus

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

การประมาณค่าในช่วงใน 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 ที่เบราว์เซอร์จะทำการประมาณค่าระหว่างคีย์เฟรม

เคลื่อนไหว 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 ด้วย