Một số cách chuyển đổi giữa hiển thị-ẩn các phần tử bằng CSS

Bài đăng này đã không được cập nhật trong 4 năm

Một số cách chuyển đổi (switch) giữa hiển thị-ẩn các yếu tố (elements) bằng CSS

Thực tế có nhiều cách để hiển thị và ẩn các elements tùy vào thói quen của từng người, bài viết này giới thiệu một số cách chuyển đổi bằng các thuộc tính sau của CSS

opacity: Tạo hiểu ứng trong suốt, mờ ảo cho các thành phần như ảnh, chữ, khối nền. Thuộc tính opacity có thể được thiết lập giá trị từ 0.0 – 1.0. Với giá trị càng nhỏ thì độ trong suốt càng nhiều.
visibility: Xác định ẩn hay hiển thị thành phần trên trang.
display: Xác định loại hiển thị của thành phần. Với giá trị như sau: block, list-item, table, inherit, none, etc...

Sau đây là tính năng và ví dụ lần lượt của từng thuộc tính:

1.Switch bằng opacity

.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./css.css">
  </head>
  <body>
    <p class="target">
      <a class="text" href="https://sun-asterisk.vn/" target="_blank">
        When switching between show/hide<br>
        You can be animated by the transition
      </a>
    </p>
    
    <button class="button">Switch Show-Hide</button>
    
    <script src="./js.js"></script>
  </body>
</html>

.css

.target {
  background-color: #ea3345;
  padding: 10px;
  transition: opacity 300ms;
}
.target.is-hidden {
  opacity: 0;
}
.text {
  color: white;
}
p {
  margin: 0;
}

.js

function attachEvent () {
  var button = document.querySelector('.button')

  button.addEventListener('click', function() {
    var target = document.querySelector('.target')

    target.classList.toggle('is-hidden')
  })
}

attachEvent()

Tính năng

Duy trì khu vực riêng ngay cả khi ẩn
Có thể click/tap
Cho phép transition

2.Switch bằng visibility

.css

.target {
  background-color: #ea3345;
  padding: 10px;
}
.target.is-hidden {
  visibility: hidden;
}
.text {
  color: white;
}
p {
  margin: 0;
}

Tính năng

Duy trì khu vực riêng ngay cả khi ẩn
Không thể click/tap
Cho phép transition

3.Chuyển đổi display

.css

.target {
  background-color: #ea3345;
  padding: 10px;
}
.target.is-hidden {
  display: none;
}
.text {
  color: white;
}
p {
  margin: 0;
}

Tính năng

Không duy trì khu vực riêng khi ẩn
Không thể click/tap
Không cho phép transition

4.Kết hợp Switch giữa opacity và pointer-events

.css

.target {
  background-color: #ea3345;
  padding: 10px;
  transition: opacity 200ms;
}
.target.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.text {
  color: white;
}
p {
  margin: 0;
}

Tính năng

Duy trì khu vực riêng ngay cả khi ẩn
Không thể click/tap
Cho phép transition

5.Kết hợp Switch giữa opacity, pointer-event và property xác định kích thước

.css

.target {
  background-color: #ea3345;
  padding: 10px;
  line-height: 1.5;
  transition:
    padding-top 300ms,
    line-height 300ms;
}
.target.is-hidden {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 0;
  pointer-events: none;
}
.text {
  color: white;
  transition: opacity 200ms;
}
.target.is-hidden .text {
  opacity: 0;
}
p {
  margin: 0;
}

Tính năng

Không duy trì khu vực riêng khi ẩn
Không thể click/tap
Cho phép transition

Tóm tắt

Có nhiều phương pháp chuyển đổi dễ dàng bằng jQuery, nhưng đối với tôi việc chuyển đổi bằng CSS khiến tôi cảm thấy hoạt động trở nên nhẹ nhàng và thoải mái hơn.