代码之家  ›  专栏  ›  技术社区  ›  DarkFenix

为什么不使用animatecss在Vue中执行动画

  •  1
  • DarkFenix  · 技术社区  · 6 年前

    我使用的是VueJS,我打算在一个表中的列表中生成一个动画,我希望在添加(推送)或消除(拼接)动画时在表中生成。

    尝试过渡组,但我没有得到我想要的。

    <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 回复  |  直到 5 年前
        1
  •  1
  •   Boussadjra Brahim    6 年前

    Here 您可以找到一个添加布尔字段的工作示例 shown 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>