Hướng dẫn sử dụng Transition trong VueJS, Transition khi nói đến thì mọi người ai cũng hình dung ra là hiệu ứng chuyển động trong CSS và thường gặp nhất trong FrontEnd, để làm cho website có hiệu ứng phong phú hơn, đẹp hơn.

Trong VueJS mọi người cũng có thể sự dụng Transition cũng giống như CSS vậy, nay mình chia sẻ với mọi người cách sử dụng trong Vuejs nhé!

Các bạn tạo một file transtion-vuejs.html và copy source bên dưới vào là chạy được nhé, phần này cũng đơn giản, nên mình cũng làm cho các bạn hình dung về cách dùng thôi hi

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div class="row" id="todo-list-example">
    <div v-for="(drink,index) in drinks" class="w-full flex">
         <transition name="transition-slide-right"><button v-show="drink.amount" type="button" class="btn btn-danger" v-on:click="click1(index)">-</button></transition>
       
            <a class="btn btn-success" >{{drink.name}} ({{drink.amount}})</a>
        
         <button type="button" class="btn btn-danger" v-on:click="click2(index)">+</button>
    </div>
</div>
<style>
.w-full{margin:10px 0px;}
   .transition-slide-right-enter-active, .transition-slide-right-leave-active {
    transition: transform .5s;
}

.transition-slide-right-enter, .transition-slide-right-leave-to {
    transform: translateX(100%);
}

</style>
<script>
    new Vue({
  el: '#todo-list-example',
 data(){
            return {
                drinks: [
                    {name: 'Cola', price: '1.0', amount: 1},
                    {name: 'Sinas', price: '1.0', amount: 1}
                ],
            }
        },
        methods:{
            click1:function(index){
                this.drinks[index].amount=this.drinks[index].amount-1;
            },
            click2:function(index){
                this.drinks[index].amount=this.drinks[index].amount+1;
            }
        }    
})
</script>

Trong đoạn mã bên trên mình sử dụng đường link vuejs CDN gắn vô trực tiếp cho dễ sử dụng, nếu các bạn muốn sài bootstrap thì gắn link css bootstrap vô cho đẹp nhé

Bên cạnh đó các bạn xem đoạn script của mình, có tạo 2 hàm(click1,click2) để xử lý sự kiện tăng hoặc giảm nhé,nếu giảm về cafe(0) thì button [ - ] sẽ biến mất, nếu  cafe(1) thì sẽ hiện button [ - ]

Đều quan trọng là làm sao bạn xác nhận được vị trí hiện tại của một giá trí đó, mới quan trọng để bạn biết mà lấy giá trị tại vị trí đó ra và xử lý các bạn có thể xem lại chổ v-for của mình trên nhé: v-for="(drink,index) in drinks", index giúp chúng ta for ra vị trí hiện tại của một đối tượng trong drinks của ta! và lúc đó bạn chỉ cần xử lý thôi ::)

Chúc các bạn làm thành công!