【Vue3 从入门到实战进阶式掌握完整知识体系】023-Vue中的动画：状态动画

怼烎@ 2023-10-03 09:38 81阅读 0赞

### 文章目录 ###

*   *  5、状态动画
     *   *  代码
         *  运行结果

## 5、状态动画 ##

### 代码 ###

<!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>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data(){
         
          return{
         
            num: 1
          }
        },
        methods:{
         
          add(){
         
            // 变成 10，我希望动画是从 1 2 3 ... 10
            if(this.num < 10){
         
              const animation = setInterval(() => {
         
                this.num ++;
                if(this.num === 10){
         
                  clearInterval(animation);
                }
              }, 100);
            }
          }
        },
        template: `
            <div>
              <div>{
          {num}}</div>
              <button @click="add">增加</button>
            </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2BHE63hv-1624977333014)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f91047d488764702a4a9d47fe5a10af8~tplv-k3u1fbpfcp-watermark.image)\]