Một trang đơn giản mờ dần với JavaScript

---

Các hiệu ứng chuyển trang có thể khá phức tạp để kéo ra, nhưng những điều sau đây cho ta một hiệu ứng mờ dần đẹp mắt với độ phức tạp tối thiểu. Phần tử body nhận được một lớp fade khi hiển thị và lớp đó sau đó sẽ bị xóa ngay khi tải nội dung DOM. CSS sẽ lo phần còn lại.

Nó bổ sung một chút ma thuật thị giác 🎩, và nó cũng có thể làm mất mắt người nhìn khỏi thứ gì đó giống như FOUT (flash của văn bản không có kiểu). Nó thậm chí còn có khả năng chống lại các vấn đề JavaScript và nếu các tập lệnh không tải thì lớp fade sẽ không bao giờ được áp dụng và hiệu ứng sẽ không bao giờ được hiển thị. Đây là cách thực hiện nó.

Thêm lớp fade vào phần tử body ngay sau thẻ body mở với một lớp lót sau:

<script>
  document.body.className = 'fade';
</script>

Hoặc, nếu thẻ body của bạn đã có các lớp khác mà bạn có thể giữ lại, bạn có thể thêm lớp với classList.add () :

<script>
  document.body.classList.add('fade');
</script>

---

Sau đó, gần thẻ nội dung đóng cửa, nhưng trước khi bất kỳ file kịch bản lớn, loại bỏ các lớp với điều này:

<script>
  document.addEventListener("DOMContentLoaded", function(e) {
    document.body.className = '';
  });
</script>

Và , nếu thẻ body của bạn có các lớp khác cần được giữ lại, hãy sử dụng classList.remove () :

<script>
  document.addEventListener("DOMContentLoaded", function(e) {
    document.body.classList.remove('fade');
  });
</script>

---

Và trong CSS của bạn, hãy bao gồm thông tin như sau để tạo khoảng cách .7 giây:

body {
  opacity: 1;
  transition: 0.7s opacity;
}

body.fade {
    opacity: 0;
    transition: none;
}

---

---

Các tin liên quan

Truy cập các phần tử trong JavaScript với querySelector và querySelectorAll
2016-11-29
Let và Const trong JavaScript với ES6 / ES2015
2016-11-10
Chức năng của Trình tạo trong JavaScript với ES6 / ES2015
2016-11-07
Tham số phần còn lại trong JavaScript với ES6 / ES2015
2016-11-02
Hứa hẹn trong JavaScript với ES6 / ES2015
2016-10-31
Chữ mẫu trong JavaScript (ES6 / ES2015)
2016-10-11
console.table () trong JavaScript
2016-09-28
console.time () & console.timeEnd () trong JavaScript
2016-09-28
Phương thức chuỗi toLowerCase () và toUpperCase trong JavaScript
2016-08-29
Loại bỏ JavaScript chặn hiển thị với Async và Defer
2016-08-20