Tạo hiệu ứng động với HTML DOM trong JavaScript

JavaScript HTML DOM | 15/04/2025 by Học Javascript

Trong phát triển web hiện đại, hiệu ứng động đóng một vai trò quan trọng trong việc nâng cao trải nghiệm người dùng. Khi người dùng tương tác với các phần tử trên trang web, những hiệu ứng động mượt mà và sinh động không chỉ làm cho giao diện trở nên hấp dẫn mà còn giúp làm rõ các hành động và trạng thái của ứng dụng. Các hiệu ứng này không chỉ giới hạn ở việc thay đổi màu sắc hay kích thước của phần tử, mà còn có thể bao gồm những chuyển động phức tạp như kéo, thả hay di chuyển các phần tử trên trang.

JavaScript, thông qua HTML DOM (Document Object Model), cung cấp các phương pháp mạnh mẽ để tạo và điều khiển các hiệu ứng động. Bằng cách thay đổi thuộc tính CSS của phần tử theo thời gian, xử lý các sự kiện người dùng và kết hợp với các kỹ thuật như setInterval(), requestAnimationFrame() hay CSS transitions, chúng ta có thể tạo ra những trải nghiệm động tuyệt vời trên trang web mà không cần phải dựa vào các thư viện phức tạp.

Chủ đề này sẽ giúp bạn hiểu cách sử dụng HTML DOM kết hợp với JavaScript để tạo ra các hiệu ứng động linh hoạt, dễ dàng và tối ưu hóa hiệu suất, từ đó nâng cao trải nghiệm người dùng trên các trang web và ứng dụng web.

Khái niệm về hiệu ứng động trong JavaScript

Hiệu ứng động trong giao diện người dùng (UI) đề cập đến những thay đổi về mặt hình ảnh, vị trí, kích thước hoặc trạng thái của các phần tử trên trang web, được thực hiện một cách mượt mà và có tính tương tác. Những hiệu ứng này giúp người dùng dễ dàng nhận biết những thay đổi trên trang và tạo ra cảm giác phản hồi ngay lập tức, từ đó nâng cao trải nghiệm người dùng (UX).

Hiệu ứng động không chỉ giúp trang web trở nên sinh động và bắt mắt, mà còn có thể cải thiện tính dễ sử dụng và giúp người dùng cảm nhận được sự phản hồi nhanh chóng và chính xác từ ứng dụng. Ví dụ, việc di chuyển các phần tử khi người dùng cuộn trang, chuyển đổi màu sắc khi người dùng di chuột vào nút, hay ẩn hiện các phần tử khi nhấn vào, tất cả đều là những hiệu ứng động có thể giúp trang web trở nên trực quan và dễ sử dụng hơn.

Các loại hiệu ứng động thường gặp:

Chuyển động (Motion): Là loại hiệu ứng động cơ bản nhất, giúp thay đổi vị trí của các phần tử trên trang. Ví dụ như kéo và thả phần tử, di chuyển các đối tượng theo một quỹ đạo, hay chuyển đổi vị trí của các phần tử khi cuộn trang.
Thay đổi màu sắc (Color changes): Thay đổi màu sắc của phần tử theo sự kiện, như khi người dùng di chuột vào nút (hover effect) hoặc khi phần tử thay đổi trạng thái (focus, active).
Hoạt ảnh (Animation): Là quá trình thay đổi một hoặc nhiều thuộc tính CSS (như độ rộng, chiều cao, vị trí) của phần tử trong một khoảng thời gian cụ thể, tạo ra một chuyển động mượt mà. Ví dụ như các hoạt ảnh bật lên, trượt vào, hoặc các hiệu ứng xoay.
Hiệu ứng chuyển tiếp (Transitions): Là một kỹ thuật giúp tạo hiệu ứng chuyển tiếp giữa các trạng thái của phần tử. Thường được sử dụng để thay đổi thuộc tính của phần tử khi người dùng tương tác, như thay đổi màu nền, chiều cao, hoặc hiển thị ẩn.
Ẩn hiện phần tử (Show/Hide effects): Các hiệu ứng làm ẩn hoặc hiển thị phần tử trên trang web, có thể bao gồm các chuyển động mượt mà khi các phần tử được thêm vào hoặc xóa khỏi giao diện, như hiệu ứng trượt (slide) hay mờ dần (fade).

So sánh giữa CSS Animations và JavaScript Animations

CSS Animations:

Được khai báo trực tiếp trong CSS với các thuộc tính như @keyframes và animation.
Thường được sử dụng cho các hiệu ứng đơn giản như thay đổi màu sắc, chuyển động vị trí, hay sự thay đổi kích thước.
Lợi ích: Cực kỳ đơn giản, dễ dàng sử dụng, và được tối ưu hóa tốt cho các trình duyệt.
Nhược điểm: Không linh hoạt như JavaScript animations khi cần thực hiện các thay đổi động phức tạp hơn, đặc biệt là khi cần xử lý các điều kiện động hay kết hợp với các sự kiện JavaScript.

JavaScript Animations:

Được kiểm soát hoàn toàn bởi JavaScript, cho phép thay đổi các thuộc tính động của phần tử bất kỳ trong suốt quá trình hoạt ảnh.
Thường được sử dụng cho các hiệu ứng phức tạp hoặc các trường hợp khi cần kiểm soát mạnh mẽ hơn, chẳng hạn như khi người dùng tương tác với nhiều phần tử cùng lúc hoặc khi cần dừng/tiếp tục hoạt ảnh dựa trên các sự kiện.
Lợi ích: Linh hoạt và mạnh mẽ hơn CSS, cho phép xử lý các tình huống động phức tạp hơn.
Nhược điểm: Việc sử dụng JavaScript để tạo hoạt ảnh có thể tốn tài nguyên hơn, đặc biệt khi cần xử lý nhiều phần tử cùng lúc.

Tóm lại: Mỗi phương pháp đều có ưu và nhược điểm riêng. CSS animations thường được ưu tiên cho các hiệu ứng đơn giản, nhẹ nhàng và có thể chạy mượt mà trong trình duyệt, trong khi JavaScript animations phù hợp hơn khi yêu cầu tính linh hoạt cao và kiểm soát chi tiết về thời gian, sự kiện và trạng thái động của phần tử. Tuỳ vào tình huống cụ thể, bạn có thể lựa chọn giữa CSS hoặc JavaScript để tạo ra hiệu ứng động phù hợp cho trang web của mình.

Các phương pháp tạo hiệu ứng động bằng JavaScript

JavaScript cung cấp nhiều phương pháp để tạo các hiệu ứng động trên trang web. Những hiệu ứng này có thể giúp tăng tính tương tác và sinh động cho giao diện người dùng, từ đó cải thiện trải nghiệm người dùng. Dưới đây là một số phương pháp cơ bản và nâng cao để tạo hiệu ứng động trong JavaScript.

Thay đổi thuộc tính CSS bằng JavaScript

Một trong những cách đơn giản và phổ biến nhất để tạo hiệu ứng động là thay đổi các thuộc tính CSS của phần tử thông qua JavaScript. Việc này có thể thực hiện dễ dàng với element.style, cho phép bạn trực tiếp thay đổi các thuộc tính CSS của phần tử bất kỳ trên trang.

Cú pháp cơ bản:

element.style.property = "value";

Ví dụ về thay đổi màu nền, kích thước, vị trí của phần tử:

Thay đổi màu nền:

document.getElementById("myElement").style.backgroundColor = "blue";

Thay đổi kích thước:

document.getElementById("myElement").style.width = "200px";
document.getElementById("myElement").style.height = "100px";

Thay đổi vị trí (sử dụng position):

document.getElementById("myElement").style.position = "absolute";
document.getElementById("myElement").style.top = "100px";
document.getElementById("myElement").style.left = "150px";

Lưu ý: Khi sử dụng element.style, bạn chỉ có thể thay đổi những thuộc tính mà phần tử đang sử dụng trong inline style của nó. Nếu phần tử có CSS đã được khai báo trong một tệp CSS hoặc trong thẻ <style>, bạn sẽ không thể thay đổi trực tiếp những thuộc tính đó mà không sử dụng JavaScript để can thiệp vào các quy tắc CSS.

Sử dụng setInterval và setTimeout để tạo chuyển động

setInterval và setTimeout là các phương thức rất hữu ích trong JavaScript, giúp tạo các hiệu ứng động lặp lại hoặc có độ trễ nhất định.

setInterval(): Thực hiện một hàm sau một khoảng thời gian nhất định và lặp lại hàm đó sau mỗi khoảng thời gian đã chỉ định.
setTimeout(): Thực hiện một hàm sau một khoảng thời gian nhất định, nhưng chỉ chạy một lần duy nhất.

Cú pháp của setInterval:

setInterval(function, delay);

Cú pháp của setTimeout:

setTimeout(function, delay);

Ví dụ về tạo hiệu ứng chuyển động lặp lại với setInterval:

Giả sử bạn muốn tạo hiệu ứng di chuyển một phần tử từ trái sang phải liên tục:

var element = document.getElementById("myElement");
var position = 0;

setInterval(function() {
  position += 5; // Di chuyển 5px mỗi lần
  element.style.left = position + "px"; // Cập nhật vị trí phần tử
}, 50); // Lặp lại mỗi 50ms

Ví dụ với setTimeout để tạo hiệu ứng với độ trễ:

var element = document.getElementById("myElement");
var position = 0;

function moveElement() {
  position += 5;
  element.style.left = position + "px";

  if (position < 300) { // Dừng khi vị trí đạt 300px
    setTimeout(moveElement, 50); // Lặp lại sau mỗi 50ms
  }
}

moveElement(); // Bắt đầu chuyển động

Lưu ý: Khi sử dụng setInterval hoặc setTimeout, các hiệu ứng động có thể không mượt mà trên các thiết bị hoặc trình duyệt yếu vì chúng sử dụng một vòng lặp liên tục để thực hiện các thay đổi. Điều này có thể dẫn đến hiệu suất không tối ưu.

Sử dụng `requestAnimationFrame` để tối ưu hóa hiệu suất

requestAnimationFrame() là một phương thức JavaScript được thiết kế đặc biệt để tối ưu hóa hiệu suất khi tạo hiệu ứng động. Thay vì sử dụng setInterval hoặc setTimeout, requestAnimationFrame sẽ yêu cầu trình duyệt vẽ lại phần tử vào mỗi khung hình của animation, giúp tiết kiệm tài nguyên và đảm bảo hiệu suất mượt mà hơn.

Cú pháp của requestAnimationFrame:

requestAnimationFrame(callback);

callback là hàm bạn muốn gọi mỗi lần trình duyệt chuẩn bị vẽ lại khung hình.

Lợi ích của requestAnimationFrame:

Tối ưu hóa hiệu suất: Trình duyệt sẽ tự động điều chỉnh tốc độ vẽ lại, giúp tối ưu hóa hiệu suất và sử dụng tài nguyên hệ thống hiệu quả hơn.
Đồng bộ với khung hình: requestAnimationFrame đồng bộ với vòng lặp khung hình của trình duyệt, giúp các chuyển động trở nên mượt mà hơn và giảm thiểu độ trễ.
Dừng khi không cần thiết: Nếu animation không còn hoạt động (ví dụ khi người dùng đã rời khỏi trang), trình duyệt sẽ tự động ngừng việc gọi callback, giúp tiết kiệm tài nguyên.

Ví dụ về việc sử dụng requestAnimationFrame để tạo hiệu ứng chuyển động:

var element = document.getElementById("myElement");
var position = 0;

function moveElement() {
  position += 5; // Di chuyển 5px mỗi lần
  element.style.left = position + "px";

  if (position < 300) { // Dừng khi vị trí đạt 300px
    requestAnimationFrame(moveElement); // Gọi lại hàm trong lần vẽ tiếp theo
  }
}

moveElement(); // Bắt đầu chuyển động

Lưu ý: requestAnimationFrame giúp đảm bảo các chuyển động mượt mà và đồng bộ với tần suất làm mới màn hình, thường là 60fps (frames per second). Tuy nhiên, nó không thực hiện hàm ngay lập tức, mà sẽ đợi đến khung hình tiếp theo.

Sử dụng các hiệu ứng động nâng cao trong JavaScript

Trong JavaScript, chúng ta có thể tạo ra các hiệu ứng động phức tạp để nâng cao trải nghiệm người dùng. Các hiệu ứng này có thể bao gồm chuyển động, thay đổi kích thước, thay đổi màu sắc, hoặc kết hợp với CSS transitions để tạo ra các chuyển động mượt mà và đẹp mắt. Dưới đây là các phương pháp nâng cao để tạo hiệu ứng động bằng JavaScript.

Tạo hiệu ứng di chuyển (Move)

Hiệu ứng di chuyển là một trong những hiệu ứng phổ biến và cơ bản nhất trong các giao diện động. Bạn có thể sử dụng JavaScript để di chuyển một phần tử từ vị trí này đến vị trí khác trên trang web.

Cách thực hiện:

Đầu tiên, bạn cần thiết lập vị trí ban đầu của phần tử (thường sử dụng position: absolute hoặc position: relative trong CSS).
Sau đó, dùng JavaScript để thay đổi các thuộc tính left, top, right, hoặc bottom của phần tử theo thời gian.

Ví dụ về di chuyển phần tử:

Giả sử bạn muốn di chuyển một phần tử từ trái sang phải khi người dùng nhấn vào nút:

<div id="myElement" style="position: absolute; top: 100px; left: 0; width: 100px; height: 100px; background-color: blue;"></div>
<button onclick="moveElement()">Move</button>

<script>
function moveElement() {
  var element = document.getElementById("myElement");
  var position = 0;

  // Sử dụng requestAnimationFrame để tạo chuyển động mượt mà
  function move() {
    position += 5;
    element.style.left = position + "px";

    // Tiếp tục di chuyển cho đến khi phần tử đạt vị trí 500px
    if (position < 500) {
      requestAnimationFrame(move); // Gọi lại hàm để tiếp tục di chuyển
    }
  }

  move(); // Bắt đầu di chuyển
}
</script>

Trong ví dụ này, phần tử sẽ di chuyển từ vị trí ban đầu (left: 0) đến 500px về phía bên phải sau mỗi khung hình của animation.

Tạo hiệu ứng thay đổi kích thước (Resize)

Hiệu ứng thay đổi kích thước là một hiệu ứng động giúp phần tử thay đổi kích thước của mình theo thời gian, thường dùng cho các phần tử như hình ảnh, hộp chứa nội dung, hoặc các phần tử giao diện người dùng khác.

Cách thực hiện:

Bạn có thể thay đổi thuộc tính width và height của phần tử để thay đổi kích thước của nó.
Tương tự như di chuyển, bạn có thể sử dụng setInterval, setTimeout, hoặc requestAnimationFrame để thay đổi kích thước một cách liên tục.

Ví dụ về thay đổi kích thước phần tử:

<div id="myElement" style="position: relative; width: 100px; height: 100px; background-color: red;"></div>
<button onclick="resizeElement()">Resize</button>

<script>
function resizeElement() {
  var element = document.getElementById("myElement");
  var width = 100;
  var height = 100;

  // Sử dụng requestAnimationFrame để thay đổi kích thước một cách mượt mà
  function resize() {
    width += 5; // Mỗi lần tăng 5px
    height += 5; // Mỗi lần tăng 5px

    element.style.width = width + "px";
    element.style.height = height + "px";

    // Tiếp tục thay đổi kích thước cho đến khi đạt 300px
    if (width < 300 && height < 300) {
      requestAnimationFrame(resize); // Gọi lại hàm để tiếp tục thay đổi kích thước
    }
  }

  resize(); // Bắt đầu thay đổi kích thước
}
</script>

Trong ví dụ này, phần tử sẽ từ kích thước ban đầu 100x100px và thay đổi dần đến kích thước 300x300px.

Tạo hiệu ứng thay đổi màu sắc (Color Change)

Hiệu ứng thay đổi màu sắc của phần tử khi người dùng tương tác (như di chuột hoặc nhấn nút) là một cách tuyệt vời để thu hút sự chú ý của người dùng và tạo ra trải nghiệm tương tác phong phú.

Cách thực hiện:

Dùng JavaScript để thay đổi thuộc tính backgroundColor, color, hoặc các thuộc tính màu sắc khác của phần tử.
Bạn có thể thay đổi màu sắc ngay lập tức hoặc sử dụng hiệu ứng chuyển màu mượt mà với CSS transitions.

Ví dụ về thay đổi màu sắc khi nhấn nút:

<div id="myElement" style="width: 100px; height: 100px; background-color: green;"></div>
<button onclick="changeColor()">Change Color</button>

<script>
function changeColor() {
  var element = document.getElementById("myElement");
  element.style.transition = "background-color 1s"; // Thêm hiệu ứng chuyển màu
  element.style.backgroundColor = "red"; // Thay đổi màu sắc
}
</script>

Trong ví dụ này, khi người dùng nhấn nút, màu nền của phần tử sẽ thay đổi từ xanh lá thành đỏ trong vòng 1 giây nhờ vào transition.

Chuyển động và hoạt ảnh với CSS transitions kết hợp JavaScript

CSS transitions là một công cụ mạnh mẽ để tạo các hiệu ứng chuyển động mượt mà khi thay đổi một số thuộc tính CSS (như màu sắc, kích thước, vị trí, v.v.) mà không cần sử dụng JavaScript. Tuy nhiên, khi kết hợp với JavaScript, bạn có thể tạo ra các hiệu ứng phức tạp và linh hoạt hơn.

Giới thiệu về CSS transitions:

transition là một thuộc tính CSS giúp tạo các hiệu ứng chuyển đổi giữa hai trạng thái khác nhau của một phần tử. Các thuộc tính của transition bao gồm:

transition-property: Chỉ định thuộc tính CSS nào sẽ có hiệu ứng chuyển động.
transition-duration: Thời gian kéo dài của hiệu ứng.
transition-timing-function: Định nghĩa cách thức thời gian của hiệu ứng diễn ra (ví dụ: linear, ease, ease-in-out).
transition-delay: Đặt độ trễ trước khi hiệu ứng bắt đầu.

Kết hợp CSS transitions với JavaScript:

Khi bạn muốn tạo một hiệu ứng động mà có sự điều khiển của JavaScript, bạn có thể thay đổi các thuộc tính CSS và thêm các hiệu ứng chuyển tiếp.

Ví dụ về thay đổi màu nền và kích thước với transition trong CSS và JavaScript:

<div id="myElement" style="width: 100px; height: 100px; background-color: green;"></div>
<button onclick="resizeAndChangeColor()">Resize and Change Color</button>

<script>
function resizeAndChangeColor() {
  var element = document.getElementById("myElement");
  
  // Thêm thuộc tính transition vào CSS của phần tử
  element.style.transition = "all 1s ease";

  // Thay đổi kích thước và màu sắc
  element.style.width = "200px";
  element.style.height = "200px";
  element.style.backgroundColor = "blue";
}
</script>

Trong ví dụ này, khi người dùng nhấn nút, phần tử sẽ thay đổi kích thước và màu sắc, đồng thời hiệu ứng chuyển đổi sẽ diễn ra trong 1 giây nhờ vào transition.

Tạo hiệu ứng động với các sự kiện người dùng trong JavaScript

Hiệu ứng động không chỉ mang lại cảm giác sinh động mà còn giúp người dùng tương tác trực quan hơn với trang web. JavaScript kết hợp với các sự kiện người dùng như mouseover, click, drag, và drop có thể tạo ra những trải nghiệm thú vị. Dưới đây là các ví dụ chi tiết về cách tạo hiệu ứng động với các sự kiện người dùng.

Hiệu ứng khi người dùng di chuột (mouseover, mouseout)

mouseover và mouseout là các sự kiện phổ biến được sử dụng để tạo ra các hiệu ứng khi người dùng di chuyển con trỏ chuột qua hoặc ra khỏi phần tử. Điều này giúp tạo ra các hiệu ứng phản hồi trực quan, ví dụ như thay đổi màu sắc, phóng to thu nhỏ phần tử, hoặc hiển thị thông tin.

Ví dụ: Thay đổi màu sắc và phóng to phần tử khi di chuột qua.

<div id="myElement" style="width: 100px; height: 100px; background-color: blue; transition: all 0.3s;"></div>

<script>
  var element = document.getElementById("myElement");

  element.addEventListener("mouseover", function() {
    element.style.backgroundColor = "red"; // Thay đổi màu sắc khi di chuột qua
    element.style.transform = "scale(1.2)"; // Phóng to phần tử
  });

  element.addEventListener("mouseout", function() {
    element.style.backgroundColor = "blue"; // Đặt lại màu sắc khi di chuột ra
    element.style.transform = "scale(1)"; // Thu nhỏ phần tử trở lại
  });
</script>

Trong ví dụ trên, khi người dùng di chuột qua phần tử, màu nền của nó sẽ thay đổi từ xanh lam thành đỏ, và phần tử sẽ được phóng to. Khi chuột rời khỏi phần tử, nó sẽ trở lại kích thước ban đầu và màu sắc cũ.

Hiệu ứng khi nhấn nút (click, dblclick)

Các sự kiện click và dblclick rất hữu ích để tạo ra các hiệu ứng khi người dùng nhấn hoặc nhấn đúp vào phần tử. Bạn có thể tạo ra các hiệu ứng như thay đổi màu sắc, mở rộng phần tử, hoặc thực hiện các hành động khác.

Ví dụ: Thay đổi màu sắc khi nhấn và nhấn đúp vào phần tử.

<div id="myElement" style="width: 100px; height: 100px; background-color: green;"></div>

<script>
  var element = document.getElementById("myElement");

  element.addEventListener("click", function() {
    element.style.backgroundColor = "yellow"; // Thay đổi màu khi nhấn chuột
  });

  element.addEventListener("dblclick", function() {
    element.style.backgroundColor = "blue"; // Thay đổi màu khi nhấn đúp chuột
  });
</script>

Khi người dùng nhấn chuột vào phần tử, màu sắc sẽ chuyển thành vàng, và nếu họ nhấn đúp, màu sắc sẽ thay đổi thành xanh dương.

Hiệu ứng khi kéo thả (drag, drop)

Các sự kiện drag và drop có thể được sử dụng để tạo hiệu ứng khi người dùng kéo và thả phần tử. Ví dụ, bạn có thể tạo hiệu ứng thay đổi vị trí của phần tử, thêm bóng đổ, hoặc thay đổi màu sắc khi thả phần tử vào một vị trí nhất định.

Ví dụ: Thêm hiệu ứng khi kéo và thả phần tử.

<div id="dragElement" style="width: 100px; height: 100px; background-color: orange; position: absolute;" draggable="true"></div>
<div id="dropZone" style="width: 200px; height: 200px; background-color: lightgray; position: absolute; top: 150px; left: 150px;"></div>

<script>
  var dragElement = document.getElementById("dragElement");
  var dropZone = document.getElementById("dropZone");

  // Sự kiện kéo bắt đầu
  dragElement.addEventListener("dragstart", function(e) {
    e.dataTransfer.setData("text", "dragging"); // Thiết lập dữ liệu kéo
    dragElement.style.opacity = 0.5; // Giảm độ trong suốt khi kéo
  });

  // Sự kiện thả
  dropZone.addEventListener("dragover", function(e) {
    e.preventDefault(); // Cho phép phần tử được thả
  });

  dropZone.addEventListener("drop", function(e) {
    e.preventDefault();
    dragElement.style.opacity = 1; // Khôi phục độ trong suốt
    var rect = dropZone.getBoundingClientRect();
    dragElement.style.left = rect.left + "px"; // Đặt lại vị trí phần tử khi thả
    dragElement.style.top = rect.top + "px";
  });
</script>

Trong ví dụ trên, khi người dùng kéo phần tử và thả vào vùng drop, phần tử sẽ di chuyển đến vị trí của vùng drop và có một hiệu ứng giảm độ trong suốt khi đang kéo.

Tạo hiệu ứng động cho phần tử động trong JavaScript

Các phần tử động có thể được thêm vào hoặc xóa khỏi DOM trong quá trình chạy trang web. Việc áp dụng các hiệu ứng động khi thêm hoặc xóa phần tử sẽ làm cho trang web trở nên sống động và dễ tương tác hơn.

Thêm phần tử mới vào DOM và áp dụng hiệu ứng

Khi bạn thêm phần tử mới vào DOM, bạn có thể áp dụng hiệu ứng để làm cho phần tử xuất hiện một cách mượt mà. Các hiệu ứng phổ biến bao gồm fade-in, slide-in, hoặc đơn giản là tăng kích thước dần dần.

Ví dụ: Thêm phần tử mới vào DOM và áp dụng hiệu ứng fade-in.

<button onclick="addElement()">Add New Element</button>

<script>
function addElement() {
  var newElement = document.createElement("div");
  newElement.style.width = "100px";
  newElement.style.height = "100px";
  newElement.style.backgroundColor = "purple";
  newElement.style.opacity = 0;
  document.body.appendChild(newElement);

  // Áp dụng hiệu ứng fade-in
  setTimeout(function() {
    newElement.style.transition = "opacity 1s";
    newElement.style.opacity = 1; // Đưa phần tử từ 0% lên 100% độ sáng
  }, 10);
}
</script>

Khi người dùng nhấn nút, một phần tử mới sẽ được thêm vào DOM và áp dụng hiệu ứng fade-in, làm cho phần tử xuất hiện mượt mà từ trạng thái trong suốt đến đầy đủ.

Xóa phần tử khỏi DOM và áp dụng hiệu ứng

Khi phần tử bị xóa khỏi DOM, bạn có thể tạo hiệu ứng trước khi phần tử biến mất. Một trong những hiệu ứng phổ biến là fade-out, giúp phần tử từ từ mờ dần trước khi bị xóa.

Ví dụ: Xóa phần tử khỏi DOM với hiệu ứng fade-out.

<button onclick="removeElement()">Remove Element</button>

<script>
function removeElement() {
  var element = document.getElementById("myElement");
  element.style.transition = "opacity 1s";
  element.style.opacity = 0; // Áp dụng hiệu ứng fade-out

  setTimeout(function() {
    element.remove(); // Xóa phần tử sau khi hiệu ứng hoàn tất
  }, 1000); // Chờ 1 giây để hiệu ứng fade-out hoàn tất trước khi xóa phần tử
}
</script>

Khi người dùng nhấn nút, phần tử sẽ mờ dần (fade-out) và sau 1 giây, nó sẽ bị xóa khỏi DOM.

Kết bài

Hiệu ứng động trong JavaScript đóng vai trò quan trọng trong việc nâng cao trải nghiệm người dùng, giúp giao diện web trở nên sinh động và trực quan hơn. Bằng cách sử dụng JavaScript kết hợp với các sự kiện người dùng như mouseover, click, drag, và drop, chúng ta có thể tạo ra các hiệu ứng phản hồi mượt mà và chuyên nghiệp.

Ngoài ra, việc áp dụng hiệu ứng động khi thêm hoặc xóa phần tử khỏi DOM không chỉ giúp trang web trở nên linh hoạt hơn mà còn làm cho các thay đổi trên giao diện trở nên tự nhiên và dễ hiểu hơn đối với người dùng. Tùy thuộc vào yêu cầu cụ thể, chúng ta có thể lựa chọn các phương pháp khác nhau như thay đổi thuộc tính CSS trực tiếp, sử dụng setTimeout(), setInterval(), hoặc tối ưu hóa hiệu suất với requestAnimationFrame().

Tóm lại, việc hiểu và áp dụng hiệu ứng động trong JavaScript một cách hợp lý sẽ giúp các ứng dụng web trở nên chuyên nghiệp hơn, thu hút người dùng và mang lại trải nghiệm tương tác tốt hơn.