Vue3列表动画和状态动画怎么应用-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

Vue3列表动画和状态动画怎么应用

概述

列表动画和状态动画都是增加用户体验的方法，当一个列表添加数据或者移除数据时，如果直接添加，突然显示，未免有些突兀，而且用户可能会不知道此时已经有数据加入了，从列表中移除数据也是，用户很有可能不知道当前已经移除了哪一条数据。有趣的动画具有很好的吸引力，可以帮助用户关注新增和移除的数据，因此，加上动画能够改善用户体验。这就是列表动画，而状态动画是指从一个状态到另一个状态的变化，如果直接变过去，就会显得比较生硬，但是如果是加了动画慢慢过渡过去会好很多。

示例解析列表动画

如上图所示我们要展示一个数字构成的列表,右面有一个按钮，点击按钮会执行一个动画增加数字。代码如下：

<!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">    <title>列表动画</title>    <style>        .list-item{            display: inline-block;            margin-right: 10px;        }        .v-enter-from{            opacity: 0;            transform: translateY(30px);        }        .v-enter-active{            transition: all 1s ease-in;        }        .v-enter-to{            opacity: 1;            transform: translateY(0px);        }        .v-move{            transition: 2.5s ease-in;        }    </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);            }        },        template:         `            <div>                <transition-group>                <span class="list-item" v-for = "item in list" :key="item">{{item}}</span>                </transition-group>                <button @click="handleClick">add</button>             </div>        `    });    const vm = app.mount('#root');</script>

登录后复制

我们先是使用CSS将列表的动画效果定义出来，这个效果和之前讲的动画定义差不多，这里不过多赘述，定义好动画后，我们在Vue的template中使用一个span将我们的数字列表显示出来，然后最关键的是我们要使用 <transition-group>标签将我们要做动画的部分包裹起来。当我们点击按钮的时候，执行js函数往列表中新增一个列表长度加一的数。动画效果读者可以，运行查看。

状态动画

状态动画比较简单，就是从一个状态到另一个状态中间加一些过渡的值，主要是通过数据控制内容的展示，比如从1变到10，如果直接1马上变成10，则显得很生硬，但是中间加一写其他数字，比如2，3，4...最后再变成10就会好很多，代码如下：

<!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">    <title>状态动画</title>    <script src="https://unpkg.com/vue@next"></script></head><body>    <div id="root"></div></body><script>    // 状态动画：通过数据控制内容的展示 const app = Vue.createApp({        data() {            return {               number:1,               animateNumber: 1            }        },        methods: {            handleClick(){                this.number =10;                if(this.animateNumber<this.number){                const animation =  setInterval(()=>{                this.animateNumber += 1;                    if(this.animateNumber === 10){                    clearInterval(animation)                     }               },100);               }            }        },        template:         `            <div>                <div>{{animateNumber}}</div>                <button @click="handleClick">do</button>              </div>        `    });    const vm = app.mount('#root');</script>

登录后复制

列表动画比较简单，我们点击执行按钮的时候，使用js函数每隔100 毫秒就去修改一下当前显示的值，直到值变成最终想要状态的值就停止。

以上就是Vue3列表动画和状态动画怎么应用的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~