Maison > Article > interface Web > Comment appliquer l'animation de liste et l'animation d'état Vue3

Comment appliquer l'animation de liste et l'animation d'état Vue3

王林avant: 2023-05-22 09:43:191320parcourir

Vue d'ensemble

L'animation de liste et l'animation de statut sont deux moyens d'augmenter l'expérience utilisateur lors de l'ajout ou de la suppression de données d'une liste, si elles sont ajoutées directement et affichées soudainement, ce sera un peu brusque et l'utilisateur. peut ne pas le savoir. Lorsque des données ont été ajoutées et que des données sont supprimées de la liste, l'utilisateur peut ne pas savoir quelle donnée a été supprimée. Les animations intéressantes sont très attrayantes et peuvent aider les utilisateurs à se concentrer sur les données nouvelles et supprimées. L'ajout d'animations peut donc améliorer l'expérience utilisateur. Il s'agit d'une animation de liste, et l'animation d'état fait référence au passage d'un état à un autre. Si vous la modifiez directement, cela semblera rigide, mais ce sera bien mieux si vous ajoutez une animation pour une transition lente.

Exemple d'analyse

Animation de liste

Comment appliquer lanimation de liste et lanimation détat Vue3

Comme le montre l'image ci-dessus, nous souhaitons afficher une liste de nombres. Il y a un bouton sur la droite. Cliquer sur le bouton exécutera une animation pour augmenter le nombre. Le code est le suivant :

<!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>

Nous utilisons d'abord CSS pour définir l'effet d'animation de la liste. Cet effet est similaire à la définition d'animation mentionnée précédemment. Je n'entrerai pas dans les détails ici. Après avoir défini l'animation, nous utilisons un. span dans le modèle Vue pour La liste des nombres est affichée, et le plus important est que nous utilisons la balise <transition-group></transition-group> pour envelopper la partie que nous voulons animer. Lorsque nous cliquons sur le bouton, la fonction js est exécutée pour ajouter un numéro à la liste avec la longueur de la liste plus un. Les lecteurs peuvent visualiser l'effet d'animation en l'exécutant.

Animation d'état

Comment appliquer lanimation de liste et lanimation détat Vue3

L'animation d'état est relativement simple, elle consiste à ajouter des valeurs de transitiond'un état à un autre. Elle contrôle principalement l'affichage du contenu à travers des données, comme le passage de 1 à 10. S'il passe directement à 1, il changera immédiatement. S'il devient 10, cela semble très rigide, mais ajouter d'autres nombres au milieu, comme 2, 3, 4... et finalement le changer à 10 sera bien mieux.

<!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>

L'animation de la liste est relativement simple, on clique sur le bouton exécuter Quand , on utilise une fonction js pour modifier la valeur actuellement affichée toutes les 100 millisecondes, et on s'arrête jusqu'à ce que la valeur devienne la valeur finale souhaitée. État.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css JS transition

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment transférer des valeurs entre composants dans vue3Article suivant：Comment transférer des valeurs entre composants dans vue3

Articles Liés

Voir plus