Vue cung cấp cho chúng ta nhiều cách để thêm hiệu ứng transition cho các DOM khi chúng ta tiến hành thêm, sửa hay xóa chúng. Cụ thể sẽ bao gồm:
- tự động thêm vào các class để phục vụ việc CSS transition và animations
- hợp nhất với thư viện CSS của bên thứ 3, như là Animate.css
- sử dụng Javascript để tương tác vào các Dom thông qua các transition hook
- hợp nhất với thư viên JS của bên thứ 3 như là Velocity.js
Vue cung cấp cho chúng ta 1 transtion
component cho phép chúng ta thêm các hiệu ứng vào/ra (entering/leaving - sau đoạn này mình sẽ để tiếng anh để sát vơi tên của các class CSS) cho tất cả các element hay component thỏa mãn điều kiện sau:
- Render có điều kiện (sử dụng
v-if )
- Hiển thị có điều kiện (sử dụng
v-show
) - Components động
- Components không phải là root nodes
Một cách đơn gian để hiểu vỉ dụ trên như sau:
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#demo',
data: {
show: true
}
})
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
Để hiểu rõ hơn thì chúng ta cần xem xem điều gì xảy ra bên trong transition
component khi mà ta thêm hay xóa đi 1 elements trong nó:
- Vue sẽ tự động thêm vào các hiệu ứng CSS thông qua các class
- Nếu transiton component mà có chứa các Javascript hooks, thì các hooks này sẽ được gọi vào thời điểm phù hợp.
- Nếu mà không có các hiệu ứng CSS hay các JS hooks thì nó được thực hiện ngay lập tức và chẳng có hiệu ứng nào ở đây cả.