Cách tạo và sử dụng animation và transition trong JavaScript

Trong JavaScript, chúng ta có thể tạo và sử dụng hiệu ứng animation và transition để làm cho trang web trở nên hấp dẫn và tương tác. Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo và sử dụng animation và transition trong JavaScript.

Table of Contents

Transition

Transition cho phép chúng ta áp dụng hiệu ứng chuyển đổi cho các thuộc tính CSS khi chúng thay đổi giá trị. Chúng ta có thể xác định thời gian, hiệu ứng và các thuộc tính CSS mà chúng ta muốn áp dụng transition.

Để sử dụng transition, chúng ta cần định nghĩa các thuộc tính CSS cần chuyển đổi và thêm thuộc tính transition vào các yếu tố HTML tương ứng. Dưới đây là một ví dụ:

// CSS
.square {
width: 100px;
height: 100px;
background-color: red;
transition: width 1s, height 1s, background-color 1s;
}

// JavaScript
const square = document.querySelector('.square');

square.addEventListener('click', function() {
square.style.width = '200px';
square.style.height = '200px';
square.style.backgroundColor = 'blue';
});

 

Trong ví dụ trên, chúng ta đã định nghĩa một hình vuông có các thuộc tính CSS ban đầu là width, height và background-color. Chúng ta đã áp dụng transition cho các thuộc tính này trong thẻ CSS bằng cách sử dụng thuộc tính transition. Khi người dùng nhấp vào hình vuông, chúng ta thay đổi giá trị các thuộc tính CSS và transition sẽ được áp dụng, tạo hiệu ứng chuyển đổi mềm mại.

Build an interactive CLI application with Node.js, Commander, Inquirer, and Mongoose | by Chatthana Janethanakarn | SkillLane | Medium

Animation

Animation cho phép chúng ta tạo ra các hiệu ứng chuyển động phức tạp bằng cách định nghĩa keyframes và các thuộc tính CSS liên quan. Chúng ta có thể xác định thời gian, tần suất và các thuộc tính CSS để tạo ra hiệu ứng chuyển động tùy chỉnh.

Để sử dụng animation, chúng ta cần định nghĩa keyframes bằng cách sử dụng @keyframes trong CSS và sau đó áp dụng animation bằng cách sử dụng thuộc tính animation trong JavaScript.

Dưới đây là một ví dụ:

// CSS
@keyframes move {
0% { left: 0; }
50% { left: 200px; }
100% { left: 0; }
}

.square {
position: relative;
width: 100px;
height: 100px;
background-color: red;
animation: move 2s infinite;
}

// JavaScript
const square = document.querySelector('.square');

square.addEventListener('click', function() {
square.style.animationPlayState = 'paused';
});

 

Trong ví dụ trên, chúng ta đã định nghĩa một keyframe có tên là “move” với các quy tắc CSS cho các bước chuyển đổi khác nhau. Chúng ta đã áp dụng animation cho hình vuông trong thẻ CSS bằng cách sử dụng thuộc tính animation. Trong JavaScript, khi người dùng nhấp vào hình vuông, chúng ta tạm dừng animation bằng cách đặt thuộc tính animationPlayState thành “paused”.

Tổng quan về Javascript - Những lý do nên học Javascript

Sử dụng animation và transition trong JavaScript, chúng ta có thể tạo ra các hiệu ứng chuyển động và chuyển tiếp đẹp mắt trên trang web. Transition cho phép chúng ta áp dụng hiệu ứng chuyển đổi khi các thuộc tính CSS thay đổi giá trị. Animation cho phép chúng ta tạo ra các hiệu ứng chuyển động phức tạp bằng cách định nghĩa keyframes và các thuộc tính CSS liên quan. Với việc sử dụng JavaScript, chúng ta có thể điều khiển và tương tác với animation và transition để tạo ra trải nghiệm tốt hơn cho người dùng trên trang web của chúng ta.

Tags:
Related Posts