初识 Vue（27）---（Vue 中的列表过渡）_27.哪个是vue-ci-优快云博客

本文链接：https://blog.youkuaiyun.com/jianghao233/article/details/81436221

本文介绍如何在Vue中为列表项添加过渡动画效果。通过使用<transition-group>组件，可以轻松实现列表项的渐显渐隐动画。文章详细解释了动画原理及CSS样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 中的列表过渡

功能：有一个列表项，循环显示数组中的数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 中的列表过渡</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='root'>
      <div v-for="item of list" :key="item.id">
        {{item.title}}
      </div>
      <button @click="handleBtnClick">Add</button>
    </div>

    <script>
     var count = 0;  //计数器
     var vm = new Vue({
        el:'#root',
        data:{
            list:[]
        },
        methods:{
            handleBtnClick:function(){
                this.list.push({
                  id: count++,
                  title:'hello world'
                })
            }
    
        
       }
    })
    </script>   
</body>
</html>

输出：点击---添加hello world

功能：向每次添加数的过程中添加动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 中的列表过渡</title>
    <script src = './vue.js'></script>
    <style>
     .v-enter,.v-leave-to{
      opacity:0;
     }
     .v-enter-active,.v-leave-active{
      transition: opacity 1s;
     }
   </style>
</head>
<body>
    <div id ='root'>
      <transition-group>
        <div v-for="item of list" :key="item.id">
        {{item.title}}
        </div>
      </transition-group>
      <button @click="handleBtnClick">Add</button>
    </div>

    <script>
     var count = 0;  //计数器
     var vm = new Vue({
        el:'#root',
        data:{
            list:[]
        },
        methods:{
            handleBtnClick:function(){
                this.list.push({
                  id: count++,
                  title:'hello world'
                })
            }
    
        
       }
    })
    </script>   
</body>
</html>

输出：点击---添加hello world（1秒完全出现）

<transition-group>标签

原理：<div>{{item.title}}</div> 经过循环后，会变为数个 <div> hello world </div>,挡在列表的外层加入<transition-group>标签，相当于给每个<div> hello world </div>加上<transition>标签，即<transition><div> hello world </div></transition>,就将列表的过渡转换成了单个元素的过渡，Vue 会动态地在元素显示和隐藏时添加 class,在前面设置了class所对应的内容

<style>
     .v-enter,.v-leave-to{
      opacity:0;
     }
     .v-enter-active,.v-leave-active{
      transition: opacity 1s;
     }
   </style>

则每个 div 就有了自己的动画