Trong bài viết này mình sẽ giúp các bạn phân biệt 3 thuộc tính opacity: 0, display:none, visibility:hidden để dùng đúng cũng như đỡ gặp bug nhé 😀

Đầu tiên mình đi qua thuộc tính opacity trước nha. Nó sẽ chạy từ 0 đến 1, giá trị 1 là bình thường còn 0 là không thấy gì cả nhưng nó vẫn ở đó và chiếm diện tích và có thể nhấn vào được bình thường nha, bạn có thể thử hover vào thấy hình con trỏ chuột ngay

Tiếp theo visibility:hidden thì nó vẫn chiếm diện tích nhưng không thể nhấn vào được nên hover vào không có con trỏ gì nữa hết

Cuối cùng là display:none thì nó biến mất hoàn toàn khỏi trang luôn, không chiếm diện tích cũng như không thể nhấn vô được nữa

Thường 2 thuộc tính opacity và visibility sẽ đi chung với nhau để làm hiệu ứng với kết hợp với thuộc tính transition mượt hơn kiểu nhấn vào hiện ra như menu chẳng hạn. Còn display không hỗ trợ với transition nên đôi khi muốn hiển thị nhanh gọn thì có thể dùng display:none với display: block luôn

Hy vọng với sự so sánh ngắn gọn này sẽ giúp cho các bạn hiểu nên dùng thuộc tính nào để ẩn hiện với transition mượt mà hơn mà không phải hỏi vì sao lại Giật Giật nữa nhé hehe