VueJS - Chuyển đổi và Hoạt ảnh

Giới thiệu

Xin chào các pháp sư Vue.js tương lai! ? Tôi rất vui mừng được dẫn dắt các bạn trên hành trình đầy thú vị qua thế giới ma thuật của các chuyển đổi và hoạt ảnh trong Vue.js. Là một người đã dạy khoa học máy tính trong nhiều năm, tôi có thể告诉 bạn rằng việc thêm các chuyển đổi mượt mà và các hoạt ảnh bắt mắt vào các ứng dụng web của bạn giống như thêm cát vào bánh cupcake - nó làm cho mọi thứ trở nên thú vị hơn!

Bây giờ, đừng lo lắng nếu bạn mới bắt đầu học lập trình. Chúng ta sẽ bắt đầu từ những điều cơ bản và dần dần nâng cao. Cuối cùng của bài hướng dẫn này, bạn sẽ tạo ra các hoạt ảnh mà bạn bè bạn sẽ nói, "Wow, bạn đã làm thế nào để làm được thế?" Vậy, chúng ta cùng bắt đầu nhé!

Chuyển đổi

什么是转换？

Trong thế giới phát triển web, một chuyển đổi giống như một sự thay đổi mượt mà từ trạng thái này sang trạng thái khác. Hãy tưởng tượng một công tắc đèn không chỉ bật và tắt đột ngột, mà thay vào đó là dần sáng hoặc dần tối. Đó chính là bản chất của một chuyển đổi!

Ví dụ cơ bản về chuyển đổi

Hãy bắt đầu với một ví dụ đơn giản. Chúng ta sẽ tạo một nút khi nhấp sẽ hiển thị hoặc ẩn một thông báo với hiệu ứng mờ dần.

<template>
<div>
<button @click="show = !show">Chuyển đổi</button>
<transition name="fade">
<p v-if="show">Xin chào, tôi là một thông báo đang chuyển đổi!</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>

Giải thích:

1. Chúng ta có một nút nhấp để thay đổi giá trị show.
2. Component <transition> bao quanh thông báo của chúng ta, với thuộc tính name được đặt là "fade".
3. Thẻ <p> sử dụng chỉ thị v-if để hiển thị hoặc ẩn dựa trên giá trị show.
4. Trong phần <style>, chúng ta xác định các lớp chuyển đổi:

• .fade-enter-active và .fade-leave-active đặt thời gian chuyển đổi là 0.5 giây.
• .fade-enter và .fade-leave-to đặt độ trong suốt ban đầu và cuối cùng là 0 (không nhìn thấy).

Khi bạn nhấp vào nút, thông báo sẽ mờ vào và mờ ra một cách mượt mà. Có phải rất thú vị không?

Hoạt ảnh

Sự khác biệt giữa chuyển đổi và hoạt ảnh?

Trong khi các chuyển đổi rất tuyệt vời cho các thay đổi trạng thái đơn giản, các hoạt ảnh cho phép các hiệu ứng phức tạp hơn, nhiều bước. Nếu một chuyển đổi giống như việc dần dim một ánh sáng, một hoạt ảnh giống như một buổi trình diễn ánh sáng với nhiều màu sắc và mẫu mã!

Ví dụ cơ bản về hoạt ảnh

Hãy tạo một hoạt ảnh bóng chuyền nhảy:

<template>
<div>
<button @click="show = !show">Nhảy!</button>
<transition name="bounce">
<p v-if="show">?</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
.bounce-enter-active {
animation: bounce-in 0.5s;
}
.bounce-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
</style>

Trong ví dụ này:

1. Chúng ta sử dụng cùng một cơ chế nút nhấp như trước.
2. Component <transition> bây giờ có tên là "bounce".
3. Trong phần <style>, chúng ta xác định:

• .bounce-enter-active áp dụng hoạt ảnh bounce-in.
• .bounce-leave-active áp dụng cùng hoạt ảnh nhưng ngược lại.
• Quy tắc @keyframes xác định hoạt ảnh bounce-in với ba bước.

Khi bạn nhấp vào nút, quả bóng sẽ xuất hiện với hiệu ứng nhảy và biến mất với hiệu ứng nhảy ngược. Thật vui phải không?

Lớp chuyển đổi tùy chỉnh

Vue.js cho phép chúng ta sử dụng các lớp CSS tùy chỉnh cho các chuyển đổi. Điều này rất hữu ích khi bạn muốn sử dụng các thư viện hoạt ảnh CSS thứ ba như Animate.css.

Dưới đây là cách bạn có thể sử dụng các lớp tùy chỉnh:

<template>
<div>
<button @click="show = !show">Hoạt ảnh!</button>
<transition
enter-active-class="animated fadeInDown"
leave-active-class="animated fadeOutUp"
>
<p v-if="show">? Đến vô cực và xa hơn!</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
/* Giả sử chúng ta đã nhập Animate.css ở đây */
</style>

Trong ví dụ này, chúng ta sử dụng các lớp Animate.css trực tiếp trong component <transition>. Các thuộc tính enter-active-class và leave-active-class cho phép chúng ta xác định các lớp tùy chỉnh cho các hoạt ảnh vào và ra.

Thời gian chuyển đổi rõ ràng

Đôi khi, bạn có thể muốn xác định rõ ràng thời gian một chuyển đổi hoặc hoạt ảnh kéo dài bao lâu. Vue.js cho phép bạn làm điều này với thuộc tính :duration:

<template>
<div>
<button @click="show = !show">Chậm-motion</button>
<transition :duration="1000">
<p v-if="show">Tôi đang di chuyển chậm...</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
.v-enter-active, .v-leave-active {
transition: all 1s;
}
.v-enter, .v-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>

Ở đây, chúng ta đặt thời gian chuyển đổi là 1000 mili giây (1 giây) cho cả vào và ra. Bạn cũng có thể đặt thời gian khác nhau cho vào và ra:

<transition :duration="{ enter: 500, leave: 800 }">
<!-- ... -->
</transition>

Hooks JavaScript

Để có thêm kiểm soát над các chuyển đổi của bạn, Vue.js cung cấp các hooks JavaScript. Những hooks này giống như những người giúp đỡ nhỏ giúp bạn chạy mã tại các điểm cụ thể trong quá trình chuyển đổi.

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

<template>
<div>
<button @click="show = !show">Hoạt ảnh</button>
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
>
<p v-if="show">? Tôi được kiểm soát bởi JavaScript!</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
},
methods: {
beforeEnter(el) {
console.log('Trước khi vào');
},
enter(el, done) {
console.log('Vào');
done();
},
afterEnter(el) {
console.log('Sau khi vào');
},
enterCancelled(el) {
console.log('Vào bị hủy');
},
beforeLeave(el) {
console.log('Trước khi ra');
},
leave(el, done) {
console.log('Ra');
done();
},
afterLeave(el) {
console.log('Sau khi ra');
},
leaveCancelled(el) {
console.log('Ra bị hủy');
}
}
}
</script>

Những hooks này cho phép bạn kiểm soát chính xác quá trình chuyển đổi. Bạn có thể sử dụng chúng để kích hoạt các hoạt ảnh khác, cập nhật dữ liệu hoặc thực hiện các hành động khác tại các điểm cụ thể trong quá trình chuyển đổi.

Chuyển đổi tại render lần đầu

Mặc định, các chuyển đổi trong Vue.js chỉ xảy ra khi một phần tử được chèn vào hoặc xóa khỏi DOM. Nhưng nếu bạn muốn một phần tử chuyển đổi trong lần render đầu tiên, Vue.js cũng có thể làm được với thuộc tính appear:

<template>
<div>
<transition appear>
<p>? Tôi xuất hiện với một chuyển đổi!</p>
</transition>
</div>
</template>

<style>
.v-enter-active {
transition: all .3s ease;
}
.v-enter {
opacity: 0;
transform: translateY(-20px);
}
</style>

Với thuộc tính appear, phần tử sẽ chuyển đổi vào khi component lần đầu tiên được render.

Hoạt ảnh trên các component

Cuối cùng, hãy nói về việc hoạt ảnh các component. Tin tốt là bạn có thể sử dụng tất cả các tính năng chuyển đổi mà chúng ta đã thảo luận trên các component tùy chỉnh của bạn!

<template>
<div>
<button @click="toggleComponent">Chuyển đổi Component</button>
<transition name="fade" mode="out-in">
<component :is="currentComponent"></component>
</transition>
</div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
components: {
ComponentA,
ComponentB
},
data() {
return {
currentComponent: 'ComponentA'
}
},
methods: {
toggleComponent() {
this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
}
}
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>

Trong ví dụ này, chúng ta đang chuyển đổi giữa hai component với hiệu ứng fade. Thuộc tính mode="out-in" đảm bảo rằng component cũ sẽ chuyển đổi ra trước khi component mới chuyển đổi vào.

Kết luận

Wow, chúng ta đã bao quát rất nhiều nội dung! Từ các chuyển đổi cơ bản đến các hoạt ảnh phức tạp, các lớp tùy chỉnh đến các hooks JavaScript, và thậm chí là hoạt ảnh trên các component. Nhớ rằng, chìa khóa để thành thạo các khái niệm này là thực hành. Vậy, hãy thử nghiệm với các ví dụ này, kết hợp các kỹ thuật khác nhau và quan trọng nhất là, hãy vui vẻ!

Hoạt ảnh và chuyển đổi có thể thực sự làm sống động các ứng dụng Vue.js của bạn. Chúng không chỉ giúp ứng dụng của bạn trông đẹp hơn mà còn cải thiện trải nghiệm người dùng bằng cách cung cấp phản hồi thị giác và hướng dẫn người dùng qua ứng dụng của bạn.

Tiếp tục khám phá, tiếp tục sáng tạo, và trước khi bạn nhận ra, bạn sẽ trở thành chuyên gia hoạt ảnh trong đội ngũ phát triển của bạn. Chúc may mắn, các pháp sư Vue.js tương lai! ?✨

Credits: Image by storyset