老师，我这边添加他虽然有动画但不是按照我想得去动删除已有动画

来源：4-7 列表动画

慕标3278801

2021-06-23

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
    <title>Document</title>
    <style>
 
        .v-leave-active,
        .v-enter-active{
            transition: all .5s ease-in;
        }
        .v-enter.from,
        .v-leave-to{
            opacity: 1;
            transform: translateY(30px);
        }
        .v-enter-to,
        .v-enter.from{
            opacity: 0;
            transform: translateY(0);
        }
        .v-move{
            transition: all .5s ease-in;
        }
        .list-item{
            display: inline-block;
            margin-right: 10px;
        }
        
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    //列表动画的实现
    const app = Vue.createApp({
        data(){
            return{
               list:[1,2,3]
            }
        },
        methods:{
            handleClick(){
              this.list.unshift(this.list.length +1);  
            },
            handleDeleteClick(){
                this.list.shift(this.list.length -1);
            }
        },
        template:`
        <div>
            <transition-group mode="in-out">
           <span class="list-item" v-for="item in list" :key="item">{{item}}</span>
           </transition-group>
           <button @click="handleClick">增加</button>
            <button @click="handleDeleteClick">删除</button>
        </div>   
        `
    });

    const vm = app.mount('#root');
</script>
</html>

写回答

2回答