vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3 列表动画状态动画

Vue3之列表动画和状态动画示例详解

作者:时光剑客

这篇文章主要为大家介绍了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 毫秒就去修改一下当前显示的值,直到值变成最终想要状态的值就停止。

总结

列表动画和状态动画都是为了增强用户体验,列表动画主要是在列表中的数据变化的时候执行的,而状态动画主要是当一个状态更换到零一个状态的时候执行,列表动画通过vue提供的<transition-group>标签包裹需要执行动画的部分实现,而列表动画通过控制数据内容的展示实现,本文介绍的都是简单的动画效果,读者若需要实现更炫丽的动画效果,请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文