老师删除元素时剩下的元素没有过渡效果呢

来源：4-7 列表动画

小菜鸡冲冲冲

2021-04-09

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 26</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
       
        .v-enter-from{
            opacity: 0;
            transform: translateY(30px);
        }
        .v-enter-active{
            transition: all 1s ease-in;
        }

        .v-enter-to{
            opacity: 1;
            transform: translateY(0);

        }
        .v-leave-from{
            opacity: 1;
            transform: translateY(0px);
        }
        .v-leave-active{
            transition: all 1s ease-in;
        }

        .v-leave-to{
            opacity: 0;
            transform: translateY(30px);

        }
        .v-move{
            transition: all 1s ease-in;
        }
        .list-item{
            display: inline-block;
            margin-right: 10px;
        }
     
    </style>
</head>

<body>
    <div id="root"></div>
</body>
<script>


    //注意把模板中的标签换为<transition-group>即可
    
    const app = Vue.createApp({

        data() {
            return {   
                list:[1,2,3]   
            }
        },
 

        methods:{
            handleClickAdd(){
                this.list.unshift(this.list.length+1)
            },
            
            handleClickDrop(){
                this.list.shift()
            }
        },
        template: `
        <div>
        <transition-group mode='out-in'>
          <span class="list-item" v-for="item in list" :key="item">{{item}}</span>
        </transition-group>
        <button @click="handleClickAdd">增加</button>
        <button @click="handleClickDrop">减少</button>
      </div>
       
        `
    })

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

</html>

写回答

2回答