Cách tạo hiệu ứng động và chuyển tiếp trong Vue.js

Thêm hiệu ứng động sẽ giúp ứng dụng tạo từ Vue.js thêm sinh động. Dưới đây là cách tạo hiệu ứng và chuyển tiếp đơn giản nhất trong Vue.js.

Hiệu ứng chuyển tiếp và hoạt ảnh đóng vai trò chính trong trải nghiệm của người dùng. Bằng cách thêm các hiệu ứng tinh tế giữa các nhân tố trên trang web, bạn có thể nâng cao trải nghiệm của người dùng. Web này sẽ chạy mượt mà, bắt mắt và gây ấn tượng tốt hơn.

Hướng dẫn bên dưới minh họa cách triển khai các hiệu ứng chuyển tiếp và hoạt ảnh trong Vue.js. Dưới đây là cách tạo cả hai hiệu ứng chuyển tiếp đơn giản và phức tạp bằng thành phần transition và keyframe CSS.

Thành phần chuyển tiếp Vue.js

Vue.js tích hợp thành phần transition, cho phép bạn tạo các hoạt ảnh trong ứng dụng. Thành phần này bao quanh phần tử đích cần tạo hiệu ứng động.

Thành phần chuyển tiếp bao quanh header cấp độ 1:

<transition>
  <h1> Hello </h1>
</transition>

Khi bao quanh một nhân tố với thành phần transition, nó sẽ áp dụng class chuyển tiếp tới nhân tố mà nó thu gọn. Tổng tất cả có 6 class chuyển tiếp. 3 class kiểm soát hiệu ứng của nhân tố mà nó nhập vào trang. 3 class còn lại kiểm soát hiệu ứng động của nhân tố khi nó thoát trang.

Áp dụng class chuyển tiếp khi các nhân tố vào trang

Trong suốt quá trình của nhân tố vào DOM, thành phần transition áp dụng các class enter-from, enter-to và enter-active cho nó. Những class này cho phép bạn kiểm soát nhân tố sẽ chuyển động và chuyển tiếp vào trang này.

• Enter-from: Áp dụng cho nhân tố đó trước khi nó vào trình duyệt. Bạn dùng class này để đặt trạng thái CSS ban đầu của nhân tố.
• Enter-to: Áp dụng nhân tố này khi nó vào trình duyệt. Bạn dùng class này để đặt trạng thái CSS cuối cùng của nhân tố đó.
• Enter-active: Áp dụng khi phần tử đang chuyển tiếp giữa các trạng thái. Đây là nơi bạn chỉ định thời gian diễn ra hiệu ứng chuyển tiếp.

Ví dụ:

<transition>
  <h1> Hello </h1>
</transition>

.enter-from {
  opacity: 0;
}

.enter-to {
  opacity: 1;
}

.enter-active {
  transition: opacity 2s ease;
}

Với code này, header cấp độ 1 mất 2 giây để chuyển tiếp từ vô hình (opacity: 0) sang hiển thị hoàn toàn (opacity: 1). Hiệu ứng chuyển tiếp này diễn ra khi nhân tố đó vào DOM. Nếu không chuyển tiếp, text sẽ hiện ngay lập tức trên trình duyệt khi tải trang.

Áp dụng class chuyển tiếp khi các nhân tố rời trang

Thành phần transition hỗ trợ 3 class chuyển tiếp khác mà bạn cần để áp dụng khi nhân tố đang rời DOM. Tên của chúng là leave-from, leave-to và leave-active. Những class này kiểm soát cách nhân tố sẽ chạy hiệu ứng động hoặc chuyển tiếp từ trang này.

Đúng như dự đoán, những class này tương tự như class enter- đã nhắc tới từ đầu. Thế nhưng, những class đó chỉ được kích hoạt khi phần tử chuẩn bị ngắt kết nối khỏi DOM.

Ví dụ:

<transition>
  <h1> Hello </h1>
</transition>

.leave-from {
  opacity: 0;
}

.leave-to {
  opacity: 1;
}

.leave-active {
transition: opacity 2s ease;
}

Trong trường hợp này, header cấp độ 1 mất 2 giây để làm chậm hiệu ứng chuyển tiếp từ hiển thị (opacity:1) tới vô hình (opacity:0). Chuyển tiếp này xảy ra khi nhân tố rời DOM. Nếu không có chuyển tiếp, text sẽ biến mất ngay khỏi trình duyệt.

Dùng tên chuyển tiếp

Bạn cũng có thể thêm một thuộc tính name tới thành phần chuyển tiếp. Khi làm việc này, Vue sẽ thêm tên vào class chuyển tiếp. Điều đó có nghĩa bạn có thể có nhiều chuyển tiếp trên trang. Từng trang có class chuyển tiếp riêng và thuộc tính CSS độc đáo.

Ví dụ, bạn đặt tên fade trên thành phần chuyển tiếp, sau đó, tất cả class chuyển tiếp sẽ có tiền tố với fade:

<transition name ="fade">
  <h1> Hello </h1>
</transition>

.fade-enter-from {
  opacity: 1;
}
.fade-leave-from {
  opacity: 1;
}

// other "enter" and "leave" classes with the fade as prefix

Tạo chuyển tiếp bằng thành phần Transition

Để minh họa quá trình chuyển đổi trong Vue.js, bạn sẽ bọc H1 trong thành phần transition. Ở </transition>, bạn sẽ tạo một nút bấm. Khi nút này được click, nó chuyển đổi biến showTitle giữa flase và true. Đây là code:

<template>
  <transition name="fade">
    <h1 v-if="showTitle"> Hey People </h1>
  </transition>
  <button @click="showTitle = !showTitle"> Toggle </button>
</template>

Tiếp theo, xác định phần script. Phần này chứa phương thức setup, nơi bạn khởi tạo biến showTitle bằng false.

<script>
import {ref} from 'vue'
export default {
  name: "App",
  setup() {
    const showTitle = ref(false)
    return {showTitle}
  } 
};
</script>

Giờ bạn sẽ thấy text và nút bấm trên trình duyệt:

Nếu click nút bấm này hai lần, text sẽ hiện, rồi biến mất. Thế nhưng sẽ không có chuyển tiếp giữa hai trạng thái. Giờ hãy thêm chuyển tiếp vào bên trong phần styles:

<style>
.fade-enter-from {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-enter-active {
  transition: opacity 2s ease;
}
.fade-leave-from {
  opacity: 1
}
.fade-leave-to {
  opacity: 0
}
.fade-leave-active {
  transition: opacity 2s ease;
}
</style>

Khi lần đầu tiên click vào nút bấm này, bạn đang chuyển tiếp H1 từ mờ sang hiển thị bằng class .enter. Thế nhưng khi nút bấm được click lại, bạn dùng class .leave để chuyển tiếp H1 từ hiển thị sang vô hình.

Cả hai nhóm chuyển tiếp đều mất hai giây để chạy hiệu ứng mờ dần và biến mất. Bạn cũng có thể thấy tên fade được thêm vào tất cả các tên class. Nếu không làm điều đó, code sẽ không hoạt động.

Tạo hiệu ứng phức tạp bằng CSS Keyframe

Đôi khi, bạn muốn làm hiệu ứng động phức tạp hơn một chút. Bạn sẽ làm việc này trong Vue.js bằng cách tạo các hoạt ảnh keyframe CSS.

Hãy cùng xét một ví dụ về hoạt ảnh chao đảo. Hoạt ảnh này lắc lư H1 từ trái sang phải (và ngược lại) khi nó đang vào trong. CSS sau tạo một hoạt ảnh chao đảo bằng @keyframes:

@keyframes wobble {
 0% { transform: translateY(-60px); opacity: 0}
 50% {transform: translateY(0px); opacity: 1}
 60% {transform: translateX(8px);}
 70% {transform: translateX(-8px);}
 80% {transform: translateX(4px);}
 90% {transform: translateX(-4px);}
 100% {transform: translateX(0px);}
}

Lúc bắt đầu hoạt ảnh, H1 sẽ bị ẩn. Chạy một nửa hoạt ảnh (50%), H1 sẽ hiện hoàn toàn. Sau đó, ở các giai đoạn tiếp theo, bạn di chuyển text sang trái và phải. Điều này cho nó một hiệu ứng chao đảo.

Hành động trên áp dụng hoạt ảnh cho phần tử khi nó vào trang:

.fade-enter-active {
  animation: wobble 0.5s ease;
}

Trong trường hợp này, hoạt ảnh sẽ kéo dài nửa giây.

Trên đây là cách tạo hiệu ứng chuyển tiếp và hoạt ảnh động trong ứng dụng Vue.js. Hi vọng bài viết hữu ích với các bạn.