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

Tram Ho

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

.css

.js

Tính năng

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

2.Switch bằng visibility

.css

Tính năng

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

3.Chuyển đổi display

.css

Tính năng

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

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

.css

Tính năng

  1. Duy trì khu vực riêng ngay cả khi ẩn
  2. Không thể click/tap
  3. 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

Tính năng

  1. Không duy trì khu vực riêng khi ẩn
  2. Không thể click/tap
  3. 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.

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo