Home >Web Front-end >Vue.js >How to apply Vue3 list animation and state animation

How to apply Vue3 list animation and state animation

王林forward: 2023-05-22 09:43:191366browse

Overview

List animation and status animation are both ways to increase user experience. When adding data or removing data from a list, if you add it directly, The sudden display is a bit abrupt, and the user may not know that data has been added at this time. The same is true for removing data from the list. The user may not know which piece of data has been removed. Interesting animations are very attractive and can help users focus on new and removed data, so adding animations can improve the user experience. This is list animation, and state animation refers to the change from one state to another. If you change it directly, it will look stiff, but it will be much better if you add animation to slowly transition.

Example analysis

List animation

How to apply Vue3 list animation and state animation

As shown in the picture above, we want to display a list of numbers. There is a button on the right, click The button will perform an animation to increase the number. The code is as follows:

<!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(&#39;#root&#39;);
</script>

We first use CSS to define the animation effect of the list. This effect is similar to the animation definition mentioned before. I won’t go into details here. After defining the animation, we use a span displays our list of numbers, and then the most important thing is that we use the <transition-group></transition-group> tag to wrap the part we want to animate. When we click the button, the js function is executed to add a number to the list with the length of the list plus one. Readers can view the animation effect by running it.

State animation

How to apply Vue3 list animation and state animation

State animation is relatively simple, that is, adding some transition values from one state to another, mainly controlling the content through data. Display, for example, changing from 1 to 10. If 1 directly changes to 10, it will look very stiff, but adding other numbers in the middle, such as 2, 3, 4... and finally changing to 10 will be much better. Code As follows:

<!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(&#39;#root&#39;);
</script>

The list animation is relatively simple. When we click the execute button, we use the js function to modify the currently displayed value every 100 milliseconds until the value becomes the value of the final desired state.

The above is the detailed content of How to apply Vue3 list animation and state animation. For more information, please follow other related articles on the PHP Chinese website!

css JS transition

Statement：

This article is reproduced at:yisu.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to transfer values between components in vue3Next article：How to transfer values between components in vue3

See more

How to apply Vue3 list animation and state animation

Overview

Example analysis

List animation

State animation

Related articles