CSS @starting-style กฎ

การกำหนดและการใช้งาน

CSS @starting-style กฎนี้ใช้เพื่อกำหนดสไตล์ตั้งต้นขององค์ประกอบก่อนที่องค์ประกอบจะได้รับการปรับปรุงสไตล์ครั้งแรก

นี่สามารถใช้เพื่อสร้างประสาวะการเข้าและออกที่สมบูรณ์สำหรับองค์ประกอบเช่นโปรแกรมแบบแบบปูดหน้า、โปรแกรมโมเดิลหรือองค์ประกอบใด ๆ ที่เปลี่ยนสถานะจาก display: none ไปเป็นสถานะที่มีความเห็นได้

ตัวอย่าง

ตัวอย่าง 1

ใช้ @starting-styleให้กล่องเริ่มต้นด้วยความโปร่งใส 0 และตกลงมาจากด้านบน:

.box {
  width: 150px;
  height: 150px;
  background-color: pink;
  opacity: 1;
  transition: all 0.9s ease;
  @starting-style {
    opacity: 0;
    translate: 0 -80px;
  }
}

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ใช้ในโปรแกรมแบบแบบปูดหน้าและโปรแกรมต่อเมนู @starting-style:

#myPopover {
  transition: opacity .5s ease-in, scale .5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}
#myDialog {
  transition: opacity .5s ease-in, scale .5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}

ทดลองด้วยตัวเอง

เขียนภาษา CSS

@starting-style {
  การประกาศ CSS;
}

การสนับสนุนของบราวเซอร์

ตัวเลขในตารางนี้แสดงรุ่นเวอร์บราวเซอร์ที่สนับสนุน @ กฎนี้ครบถ้วน。