Trong sách hướng dẫn này, chúng ta sẽ tìm hiểu quy trình hiển thị và ẩn div với dấu “ chuyển tiếp ”Thuộc tính của CSS.
Làm thế nào để hiển thị và ẩn một Div bằng Transition trong CSS?
CSS “ chuyển tiếp ”Thuộc tính giúp bạn dễ dàng thay đổi giá trị của thuộc tính dựa trên một khoảng thời gian cụ thể. Nó có thể là một phần tử nổi hoặc hoạt động, tùy thuộc vào trạng thái của nó. Hơn nữa, thuộc tính chuyển tiếp của CSS được sử dụng để hiển thị và ẩn div trong HTML.
Bây giờ, hãy chuyển sang cú pháp của thuộc tính chuyển đổi.
Cú pháp
Có hai điều bạn cần chỉ định khi tạo hiệu ứng chuyển tiếp:
Về cơ bản, ' chuyển tiếp ”Là một thuộc tính viết tắt bao gồm bốn thuộc tính khác, được đưa ra dưới đây:
chuyển tiếp : chuyển tiếp-thuộc tính-thời gian chuyển đổiquá trình chuyển đổi-thời gian-chức năng chuyển đổi-độ trễ
Dưới đây là mô tả của các thuộc tính được đề cập:
- thuộc tính chuyển tiếp: Nó được sử dụng để thiết lập quá trình chuyển đổi sang bất kỳ thuộc tính CSS nào. Chẳng hạn như chiều rộng, chiều cao, độ mờ và nhiều hơn nữa.
- thời lượng chuyển tiếp: Nó được sử dụng để chỉ định khoảng thời gian của quá trình chuyển đổi.
- chuyển tiếp-thời gian-chức năng: Nó được sử dụng để thiết lập tốc độ của quá trình chuyển đổi.
- độ trễ chuyển tiếp: Nó chỉ định thời gian bắt đầu hoặc trì hoãn quá trình chuyển đổi.
Hãy lấy một ví dụ trong đó chúng tôi sẽ hiển thị và ẩn div với “ chuyển tiếp ”Thuộc tính của CSS. Vì mục đích này, trước tiên, chúng tôi tạo một “ div ”Và một loại đầu vào“ hộp kiểm ”.
Bước 1: Tạo và tạo kiểu Div
Trong thẻ
HTML
>
Sau đó, chúng tôi sẽ tạo kiểu cho div bằng cách sử dụng thuộc tính background-color và đặt màu của nền là “ rgb (238, 190, 118) ”. Chúng tôi sẽ đặt chiều cao của div là “ 150px ”Và điều chỉnh đường viền xung quanh nó thành“ 10px ',' cây rơm ', và ' rgb (6, 56, 2) ”. Cuối cùng, chúng tôi sẽ chỉ định kích thước phông chữ là “ 50px ”.
CSS
div {màu nền : rgb ( 238 , 190 , 118 ) ;
Chiều cao : 150px ;
biên giới : 10px cây rơm rgb ( 6 , 56 , hai ) ;
cỡ chữ : 50px ;
}
Đầu ra của đoạn mã được mô tả ở trên được đưa ra bên dưới. Tại đây, bạn có thể thấy rằng div và hộp kiểm đã được tạo thành công:
Bây giờ, hãy chuyển sang bước tiếp theo, trong đó chúng ta ẩn và hiển thị div bằng thuộc tính chuyển tiếp.
Bước 2: Hiển thị và ẩn một sự chia cắt với sự chuyển đổi
Để làm điều này, chúng tôi sẽ đặt hiệu ứng chuyển tiếp bằng cách đặt “ sự mờ đục ”, Thời lượng của nó là“ 2 giây ”Và giá trị của độ mờ là“ 0 ”Trong lớp div mà chúng tôi đã tạo trong CSS:
chuyển tiếp : sự mờ đục 2 giây ;sự mờ đục : 0 ;
Ghi chú: Chúng tôi sẽ áp dụng quá trình chuyển đổi trên “ sự mờ đục ”Để thiết lập tính minh bạch của phần tử. Ở đây, chúng tôi sẽ chỉ định giá trị của nó là “ 0 ”, Có nghĩa là khi quá trình chuyển đổi bắt đầu, div sẽ bị ẩn trong hai giây.
Sau khi thiết lập các giá trị chuyển đổi, chúng tôi sẽ sử dụng “ đầu vào ”Để truy cập loại đầu vào được tạo trong tệp HTML và đặt lớp giả của phần tử đầu vào là“ :đã kiểm tra ”. Sau đó, chúng tôi sẽ truy cập vào div đã tạo và “ + Toán tử ”sẽ được sử dụng để liên kết hộp kiểm với div. Do đó, khi một thao tác được thực hiện trên hộp kiểm, việc sử dụng nó sẽ ảnh hưởng đến div. Tiếp theo, chúng tôi sẽ đặt giá trị độ mờ là “ 1 ”:
đầu vào : đã kiểm tra + div {sự mờ đục : 1
}
Ghi chú: Chúng tôi sẽ chỉ định giá trị độ mờ là “ 1 ”, Có nghĩa là khi hộp kiểm được đánh dấu, div đã tạo sẽ được hiển thị. Hơn nữa, bỏ đánh dấu nó để ẩn div
Như bạn có thể thấy, div được hiển thị và ẩn bằng cách sử dụng “ chuyển tiếp 'Tài sản và' :đã kiểm tra ”Phần tử lớp giả:
Chúng tôi đã giải thích phương pháp ẩn và hiển thị một div có thuộc tính chuyển tiếp trong CSS.
Sự kết luận
Để hiển thị và ẩn một div, “ chuyển tiếp 'Tài sản và' :đã kiểm tra 'Phần tử lớp giả được sử dụng theo cách mà giá trị của độ mờ của div được đặt là' 0 ”, Và trong: phần tử lớp giả đã chọn, đặt độ mờ là“ 1 ”. Khi người dùng nhấp vào hộp kiểm, div sẽ được hiển thị và khi không được chọn, div sẽ ẩn. Trong hướng dẫn này, chúng tôi đã mô tả phương pháp ẩn và hiển thị div bằng cách sử dụng thuộc tính chuyển đổi.