Почему анимация не выполняется в Vue с анимацией - PullRequest
Новая
       13

Почему анимация не выполняется в Vue с анимацией

0 голосов
/ 15 сентября 2018

Я использую VueJ и намереваюсь создать анимацию в списке в таблице. Я хочу, чтобы при добавлении (выполнении толчка) или удалении (соединении) анимация генерировалась внутри таблицы.

Попробуйте переходную группу, но я не получил то, что хотел.

Мой код выглядит следующим образом, я использую VueJs, Bootstrap 4 и 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>

1 Ответ

0 голосов
/ 15 сентября 2018

Здесь вы найдете рабочий пример, который добавляет логическое поле shown к элементу вашего продукта, которое можно переключать при добавлении / удалении элемента, поскольку переходы Vue работают нормально с условным рендерингом (нет необходимости включите animate.css, потому что я скопировал данные классы и анимацию): 

<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>
...