Why the animation is not executed in Vue using Animate.css

Question

I am using VueJS and I intend to generate an animation in a list within a table, I want that when adding (doing the push) or eliminating (splice) an animation is generated inside the table.

Try transition-group but I did not get what I wanted.

My code is as follows, I am using VueJS, Bootstrap 4 and Animatecss

<template>
    <thead class=" wow fadeIn animated">
        <tr>
            <th class="w-30">Name</th>
            <th class="w-10"></th>
        </tr>
    </thead>
    <transition-group name="bounceInUp" tag="tbody" class="wow animated" >
        <tr v-for="(product,index) in products" :key="index"
            >
            <td class="w-30">{{ product.name }}</td>
            <td class="w-10">
                <a class="btn-floating btn-sm btn-danger"
                    @click="deleteItem(index)">
                    <i class="fa fa-trash"></i>
                </a>
            </td>
        </tr>
    </transition-group>
</template>
<script>
export default{

    methods :{
        addItem(){
            this.products.push = {name:'Hello World'}
        }
        deleteItem(index){
            this.products.splice(index, 1);
        }
    }
}
</script>

which animation do you want?

Boussadjra Brahim
– Boussadjra Brahim

2018-09-14 23:27:23 +00:00
Commented Sep 14, 2018 at 23:27 — Boussadjra Brahim
– Boussadjra Brahim, Commented Sep 14, 2018 at 23:27
bounceInUp of the animatecss class

DarkFenix
– DarkFenix

2018-09-14 23:36:58 +00:00
Commented Sep 14, 2018 at 23:36 — DarkFenix
– DarkFenix, Commented Sep 14, 2018 at 23:36

Boussadjra Brahim · Accepted Answer · 2018-09-15 00:10:04Z

1

Here you find a working example that adds a boolean field shown to your product item which can be toggled when you add/remove an item because Vue transitions work fine with conditional rendering (no need to include the animate.css because i had copied the given classes and animations ) :

<template>
 <div>
        <table>
        <thead class=" wow fadeIn animated">
        <tr>
            <th class="w-30">Name</th>
            <th class="w-10"></th>
        </tr>
    </thead>
    <transition-group name="bounceInUp"  >
        <tr v-for="(product,index) in products" :key="index"
            v-if="product.shown">
    

            <td class="w-30" >{{ product.name }}</td>
            
            <td class="w-10">
                <a class="btn-floating btn-sm btn-danger"
                    @click="deleteItem(index)">
                    <i class="fa fa-trash"></i>
                </a>
            </td>
        </tr>
    </transition-group>
    </table>

     <button class="btn btn-floating" @click="addItem">Add new product</button>
 </div>
</template>
<script>
export default{
 data() {
    return{
    index:0,
      products:[{name:'Hello World',shown:true}]
    }
    },
    methods :{
        addItem(){

            this.products.push ( {name:'Hello World '+this.index})
            this.index++;
         this.products[this.products.length-1].shown=true;
        },
        deleteItem(index){
             this.products[index].shown=false;
            this.products.splice(index, 1);
        }
    }
}
</script>

<style>


.bounceInUp-enter-active {
  animation: bounceInUp .9s;
}
.bounceInUp-leave-active {
  animation: bounceInUp .9s reverse;
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}



</style>

edited Sep 15, 2018 at 0:10

answered Sep 14, 2018 at 23:56

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

DarkFenix Over a year ago

It does not work yet, do I need to add the tag to the trasition-group? since the columns are not aligned , I Use Single File Components

Boussadjra Brahim Over a year ago

which tag are you talking about? but my example works you could check the given link

DarkFenix Over a year ago

I mean the tag for <transition-group name = "bounceInUp" tag = "tbody" that would be tbody.

Boussadjra Brahim Over a year ago

you don't need it and also animate.css

Boussadjra Brahim Over a year ago

yes, they can't work because you need to duplicate every class and in both .classAnimName-leave-active and .classAnimName-enter-active ,e.g : fadeInLeft-enter-active and fadeInLeft-leave-active

|

Collectives™ on Stack Overflow

Why the animation is not executed in Vue using Animate.css

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related