Làm cách nào để thêm hiệu ứng mờ dần trong JavaScript?

Video tuần này rất nhanh và đơn giản và tôi hy vọng rằng một số người thấy nó hữu ích. Thông thường, jQuery làm cho các hoạt ảnh như vậy cực kỳ đơn giản để thực hiện, nhưng với Vanilla JavaScript, chúng ta cần viết thêm một vài dòng mã, điều này không phải lúc nào cũng tuyệt vời khi chúng ta tìm kiếm một giải pháp nhanh chóng. Nếu chúng ta kết hợp một số JS và CSS3, chúng ta có thể đạt được hiệu ứng mờ dần trong và ngoài khá dễ dàng và CSS cũng cung cấp cho chúng ta một số điều khiển hoạt ảnh, điều này thật tuyệt. Không cần đưa thư viện vào dự án của bạn chỉ để tạo hiệu ứng hoạt hình đơn giản hoạt động trên tất cả các trình duyệt

	

	Fade

div {
  max-width: 900px;
  text-align: center;
}
#myLogo {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3 ease-in-out;
}
#myLogo.fade {
  opacity:0;
}

let mylogo = document.getElementById['myLogo'];
document.getElementById['myButton']. title = function[]{
  mylogo.classList.toggle['fade'];
}

Tạo hiệu ứng fade css bằng javascript khá đơn giản. Tôi đã tạo hai ví dụ cho hướng dẫn này

Trong ví dụ đầu tiên, chúng ta sẽ có các điều khiển để tăng giảm dần một phần tử.
Và trong ví dụ thứ hai, chúng ta sẽ xem cách tạo một nút để bật và tắt hiệu ứng mờ dần.
Hãy xem các ví dụ và bắt đầu với ví dụ đầu tiên.

Kiểm soát hiệu ứng làm mờ css

Trong ví dụ này, chúng ta có hai nút điều khiển hiệu ứng tăng dần và giảm dần

mã html

Mã html rất đơn giản

Fade Out
Fade In

• Trong dòng 1, chúng ta có một phần tử div với một lớp ". hộp". Chúng tôi sẽ sử dụng ". box" để nhắm mục tiêu phần tử bằng javascript
• Trong dòng 3 và 4, chúng tôi có hai nút. Mỗi nút có một id duy nhất. Một lần nữa, chúng tôi sẽ nhắm mục tiêu các nút đó bằng javascript bằng cách sử dụng id của chúng

Trước khi xem mã javascript, chúng ta phải xem các quy tắc css mà chúng ta áp dụng cho phần tử div và điều quan trọng là làm cho hiệu ứng hoạt động

mã css

Hãy xem những gì chúng ta có trong mã css

.box{
	width:  300px;
	height:  200px;
	background-color: #333;
	transition: opacity .5s;
	margin-bottom: 20px;
}

.box.fade-out{  // .box .fade-out  will not work with space between the two rules.
	opacity: 0;
}

• Trong dòng 1, chúng tôi đang nhắm mục tiêu ". box" để làm cho phần tử div trông giống như một cái hộp
• Trong dòng 5, chúng tôi thêm thuộc tính chuyển tiếp vào độ mờ của phần tử và đặt thời lượng thành 0. 5 giây. Thuộc tính chuyển tiếp sẽ cung cấp cho chúng ta hoạt ảnh mờ dần sẽ kéo dài nửa giây
• Trong dòng 9, chúng tôi viết một ". mờ dần" mà chúng tôi áp dụng cho ". hộp" lớp. Chúng tôi sẽ thao túng ". lớp mờ dần" với javascript

  Nếu bạn để khoảng cách giữa ". hộp" quy tắc và ". fade-out" mã sẽ không hoạt động

• Bên trong ". mờ dần", chúng tôi đặt độ mờ thành 0. Điều này sẽ làm cho hộp ẩn đi, nhưng không phải ngay lập tức vì chúng tôi đã thêm thuộc tính chuyển tiếp vào ". hộp" quy tắc.
  Đây là cách chúng ta tạo hiệu ứng làm mờ css. Bây giờ hãy chuyển sang mã javascript.

mã javascript

Đây là mã javascript.
Ở đây chúng ta sẽ thêm và xóa phần ". fade-out" vào phần tử hộp.

let fadeInButton = document.querySelector["#fade-in-trigger"];
let fadeOutButton = document.querySelector["#fade-out-trigger"];
let box = document.querySelector[".box"];

fadeOutButton. title = function[]{
	box.classList.add["fade-out"];
}

fadeInButton. title = function[]{
	box.classList.remove["fade-out"];
}

• Trong dòng 1, chúng tôi nhắm mục tiêu nút mờ dần và lưu trữ đối tượng trong biến fadeInButton
• Ta làm tương tự với nút fade-out ở dòng 2
• Và một lần nữa chúng ta làm điều tương tự với phần tử hộp ở dòng 3
• Trong dòng 5, chúng tôi thêm trình xử lý sự kiện title vào nút mờ dần, vì vậy mỗi khi chúng tôi nhấp vào nút, một chức năng sẽ chạy
• Bên trong hàm ở dòng 6, chúng ta sẽ nhắm mục tiêu phần tử hộp và thêm lớp "fade-out".
  Điều này sẽ làm cho phần tử hộp mờ dần.
• Ở dòng 9 chúng ta cũng làm tương tự với nút fade-in nhưng bên trong hàm lần này chúng ta sẽ loại bỏ lớp "fade-out". Điều này sẽ làm cho phần tử hộp mờ dần trong

Ví dụ này là về cách kiểm soát quá trình chuyển đổi mờ dần css bằng hai nút, một nút cho hiệu ứng tăng dần và nút còn lại cho hiệu ứng giảm dần.
Bây giờ, hãy chuyển sang ví dụ thứ hai để xem cách chúng ta có thể chuyển đổi hiệu ứng làm mờ css bằng một nút duy nhất.

Chuyển đổi hiệu ứng làm mờ css

Trong ví dụ thứ hai, chúng ta sẽ chỉ có một nút để chuyển đổi hiệu ứng mờ dần.
Hãy dùng thử.

mã html

Một lần nữa mọi thứ ở đây rất đơn giản

Fade toggle

• Chúng ta lại có phần tử div với ". box" trong dòng 1
• Và ở dòng 2, chúng ta có nút chuyển đổi có id là "toggle"

Không có thay đổi nào đối với mã css, vì vậy chúng tôi chuyển ngay sang mã javascript

mã javascript

Như chúng ta đã làm trong ví dụ đầu tiên, chúng ta sẽ thêm và xóa ". fade-out" vào phần tử hộp. Chỉ lần này chúng ta sẽ sử dụng câu lệnh if để làm như vậy

Làm cách nào để thêm hoạt ảnh mờ dần trong JavaScript?

Làm cách nào để làm mờ hình ảnh trong JavaScript?

Làm cách nào để làm mờ một hộp trong JavaScript?