ในคู่มือนี้ เราจะเรียนรู้ขั้นตอนการแสดงและซ่อน div ด้วยปุ่ม ' การเปลี่ยนแปลง ” คุณสมบัติของ CSS
จะแสดงและซ่อน Div ด้วยการเปลี่ยนใน CSS ได้อย่างไร
ซีเอสเอส “ การเปลี่ยนแปลง ” ทำให้ง่ายต่อการเปลี่ยนมูลค่าของทรัพย์สินตามระยะเวลาที่กำหนด อาจเป็นองค์ประกอบลอยหรือแอ็คทีฟ ขึ้นอยู่กับสถานะขององค์ประกอบ นอกจากนี้ คุณสมบัติการเปลี่ยนแปลงของ CSS ยังใช้เพื่อแสดงและซ่อน div ใน HTML
ตอนนี้ มาดูไวยากรณ์ของคุณสมบัติการเปลี่ยนแปลงกัน
ไวยากรณ์
มีสองสิ่งที่คุณต้องระบุเมื่อสร้างเอฟเฟกต์การเปลี่ยน:
โดยพื้นฐานแล้ว “ การเปลี่ยนแปลง ” เป็นสมบัติชวเลขประกอบด้วยคุณสมบัติอื่น ๆ สี่ประการซึ่งได้รับด้านล่าง:
การเปลี่ยนแปลง : ทรานซิชั่น-คุณสมบัติทรานซิชั่น-ไทม์มิ่ง-ฟังก์ชัน ทรานซิชั่น-ดีเลย์
นี่คือคำอธิบายของคุณสมบัติดังกล่าว:
- ทรานซิชั่น-พร็อพเพอร์ตี้: ใช้เพื่อตั้งค่าการเปลี่ยนเป็นคุณสมบัติ CSS เช่น ความกว้าง ความสูง ความทึบ และอื่นๆ อีกมากมาย
- ระยะเปลี่ยนผ่าน: ใช้เพื่อระบุระยะเวลาของการเปลี่ยนแปลง
- ทรานซิชั่น-ไทม์มิ่ง-ฟังก์ชัน: ใช้เพื่อกำหนดความเร็วของการเปลี่ยนแปลง
- การเปลี่ยน-ล่าช้า: ระบุเวลาที่การเปลี่ยนเริ่มต้นหรือล่าช้า
มาดูตัวอย่างที่เราจะแสดงและซ่อน div ด้วย ' การเปลี่ยนแปลง ” คุณสมบัติของ CSS เพื่อจุดประสงค์นี้ อันดับแรก เราสร้าง “ div ” และประเภทอินพุต “ ช่องทำเครื่องหมาย ”
ขั้นตอนที่ 1: สร้างและจัดรูปแบบ Div
ภายในแท็ก
HTML
ต่อจากนี้เราจะจัดรูปแบบ div โดยใช้คุณสมบัติ background-color และกำหนดสีของพื้นหลังเป็น “ rgb(238, 190, 118) ” เราจะกำหนดความสูงของ div เป็น “ 150px ” และปรับเส้นขอบรอบๆ เป็น “ 10px ”, “ สันเขา ', และ ' rgb(6, 56, 2) ” สุดท้ายเราจะกำหนดขนาดฟอนต์เป็น “ 50px ”
CSS
div {สีพื้นหลัง : rgb ( 238 , 190 , 118 ) ;
ความสูง : 150px ;
ชายแดน : 10px สันเขา rgb ( 6 , 56 , สอง ) ;
ขนาดตัวอักษร : 50px ;
}
ผลลัพธ์ของรหัสที่อธิบายข้างต้นได้รับด้านล่าง ที่นี่ คุณจะเห็นว่าสร้าง div และช่องทำเครื่องหมายสำเร็จแล้ว:
ตอนนี้ ไปที่ขั้นตอนถัดไปที่เราซ่อนและแสดง div โดยใช้คุณสมบัติการเปลี่ยนแปลง
ขั้นตอนที่ 2: แสดงและซ่อน Div ด้วยการเปลี่ยน
ในการทำเช่นนี้ เราจะตั้งค่าเอฟเฟกต์การเปลี่ยนแปลงโดยการตั้งค่า “ ความทึบ ” โดยมีระยะเวลาเป็น “ 2s ” และค่าความทึบเป็น “ 0 ” ในคลาส div ที่เราสร้างใน CSS:
การเปลี่ยนแปลง : ความทึบ 2s ;ความทึบ : 0 ;
บันทึก: เราจะใช้การเปลี่ยนแปลงใน “ ความทึบ ” คุณสมบัติการตั้งค่าความโปร่งใสขององค์ประกอบ ที่นี่เราจะระบุค่าเป็น “ 0 ” ซึ่งหมายความว่าเมื่อการเปลี่ยนแปลงเริ่มต้น div จะถูกซ่อนไว้เป็นเวลาสองวินาที
หลังจากตั้งค่าการเปลี่ยนแปลง เราจะใช้ “ ป้อนข้อมูล ” เพื่อเข้าถึงประเภทอินพุตที่สร้างในไฟล์ HTML และตั้งค่าคลาสหลอกขององค์ประกอบอินพุตเป็น “ :checked ” จากนั้นเราจะเข้าถึง div ที่สร้างขึ้นและ ' + ตัวดำเนินการ ” จะถูกใช้เพื่อเชื่อมโยงช่องทำเครื่องหมายกับ div ดังนั้น เมื่อดำเนินการในช่องกาเครื่องหมาย การใช้งานจะส่งผลต่อ div ต่อไปเราจะตั้งค่าความทึบเป็น “ 1 ”:
ป้อนข้อมูล : ตรวจสอบแล้ว + div {ความทึบ : 1
}
บันทึก: เราจะระบุค่าความทึบเป็น “ 1 ” ซึ่งหมายความว่าเมื่อทำเครื่องหมายที่ช่องทำเครื่องหมาย div ที่สร้างขึ้นจะปรากฏขึ้น ยิ่งกว่านั้น ยกเลิกการทำเครื่องหมายเพื่อซ่อน div
อย่างที่คุณเห็น div ถูกแสดงและซ่อนโดยใช้ ' การเปลี่ยนแปลง ” ทรัพย์สินและ “ :checked องค์ประกอบระดับหลอก:
เราได้อธิบายวิธีการซ่อนและแสดง div พร้อมคุณสมบัติการเปลี่ยนใน CSS
บทสรุป
ในการแสดงและซ่อน div ' การเปลี่ยนแปลง ” ทรัพย์สินและ “ :checked ” pseudo-class element ถูกใช้ในลักษณะที่ค่าของ div opacity ถูกตั้งค่าเป็น “ 0 ” และใน :checked pseudo-class element ตั้งค่า opacity เป็น “ 1 ” เมื่อผู้ใช้คลิกที่ช่องทำเครื่องหมาย div จะปรากฏขึ้น และเมื่อไม่ได้เลือก div จะซ่อน ในคู่มือนี้ เราได้อธิบายวิธีการซ่อนและแสดง div โดยใช้คุณสมบัติการเปลี่ยนแปลง