Vue——17——列表动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <style>
        li {
            border: 1px dashed #999;
            margin: 5px;
            line-height: 35px;
            padding-left: 5px;
            font-size: 15px;
        }
        li:hover{
            background-color: pink;
            transition:all 0.4s ease
        }
        .v-enter,.v-leave-to{
            opacity: 0;
           transform: translateY(80px);
        }
        .v-enter-active,.v-leave-active{
            transition:all 0.8s ease
        }
        /* 删除元素时,被删除元素的下一列浮上来的太生硬,我们要让它也有动画效果,加上.v-move和.v-leave-active配合使用,能够实现列表后续元素渐渐地飘上来的效果 ,记住就好了 */
        .v-move{
            transition: all 0.6s ease;
        }
        .v-leave-active{
            position: absolute;
        }

    </style>
</head>

<body>
    <div id="app">
        <div>
            <label for="">
                Id:
                <input type="text" v-model="id">
            </label>
            <label for="" >
                Name:
                <input type="text" v-model="name">
            </label>
            <input type="button"value="添加" @click.key="add">
        </div>
        
           
            <!-- 在实现列表过渡的时候,如果需要过渡的元素是通过v-for循环渲染出来的不能使用transition包裹 -->
             <!-- 需要使用transitionGroup -->
             <!-- 如果要为v-for循环创建的元素设置动画,必须为每一个元素设置:key属性 -->
             <!-- 添加appear属性,实现入场时候的效果 -->
             <!-- 为transition-group设置tag属性,指定transition-group渲染为指定的元素,如果不指定默认渲染为span标签,不符合规范 -->
         <transition-group appear tag="ul">
<!-- 点击Li删除的时候,被删除的列表宽度变小了,所以设置一个width="100%" -->
          <li v-for="(item,i) in list" :key="item.id" @click=del(i) width="100%">
                {{item.id}}{{item.name}}
            </li>
         </transition-group>
        
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                id:'',
                name:'',
                list: [{
                        id: 1,
                        name: '清华大学'
                    },
                    {
                        id: 2,
                        name: '北京大学'
                    },
                    {
                        id: 3,
                        name: '中山大学'
                    },
                    {
                        id: 4,
                        name: '复旦大学'
                    },
                ]
            },
            methods: {
               add(){
                this.list.push({id:this.id,name:this.name}),
               this.id= this.name=''
               },
               del(i){
                  this.list.splice(i,1)
               }
            }
        })
    </script>
</body>

</html>
Vue——17——列表动画

猜你喜欢
