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将我们的数字列表显示出来，然后最关键的是我们要使用标签将我们要做动画的部分包裹起来。当我们点击按钮的时候，执行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列表动画和状态动画怎么应用的详细内容，更多请关注其它相关文章！