vue组件动画过渡（todolist）

使用todolist进行动画的过渡效果：

(注：调用vue.js)

  
    ul{
        list-style: none;
        padding: 0px;
    }
    span{
      
        padding-right: 20px;
    }
    a{
        margin-left:40px;
        color: red;
    }
    .list-enter, 
        .list-leave-to{
        opacity: 0;
      transform: translateY(70px);


        }
        .list-enter-to,
        .list-leave{
          opacity: 1;
        }
        .list-enter-active,
        .list-leave-active{
            transition: all 1s;
        }

 <div id="app">
        <form action="#">
            
            <input type="text" placeholder="请输入内容" v-model="inputval">
            
            <input type="submit" @click=add value="添加">

        </form>
        <transition-group tag="ul" name="list" mode="in-out">
            <!-- 自定义组件 -->
           
            <liitem  v-for="(item, index) in list" :key="index"  :content="item" :index="index"   @delete="del" >

            </transition-group>
       
        </ul> 

    </div>

<transition-group tag="ul" name="list" mode="in-out">其中ul代替ul，name是list，用来调用。mode="in-out"是动画。transition-group是自定义组件

   // 自定义组件
        Vue.component('liitem',{
            props:['content','index'],
            template:'<li class=dh><span>{{index+1}}、</span>{{content}} <a class="btn"  @click=dj>x</a</li>',
            methods:{
                dj:function(){
                    this.$emit('delete',this.index)
                }
            }
        })
        let vm = new Vue({
            el: "#app",
            data: {
               list:[],
               inputval:''
            },
            methods:{
                // 添加
                add:function(){
                    this.list.push(this.inputval),
                    this.inputval=''
                },
               //删除
               del:function(index){
                   this.list.splice(index,1)
               } 
            } 
        })

效果：

1、

2、

（注：其中进场和退出都有动画过渡）