【Vue3 从入门到实战进阶式掌握完整知识体系】020-Vue中的动画：使用 transition 标签实现单元素组件的过渡和动画效果

古城微笑少年丶 2023-10-03 09:38 41阅读 0赞

### 文章目录 ###

*   *  2、使用 transition 标签实现单元素组件的过渡和动画效果
     *   *  出入场动画
         *  运行结果
         *  出入场动画
         *  运行结果
         *  给transition加个name
         *  运行结果
         *  在transition标签具体指定出入场动画
         *  运行结果
         *  使用动画库Animate
         *  运行结果
         *  动画 + 过渡
         *  运行结果
         *  一个先执行完就是结束另一个
         *  运行结果
         *  统一设置动画和过渡效果执行时长
         *  运行结果
         *  精准设置入场和出场动画时长
         *  运行结果
         *  使用js做动画
         *  运行结果

## 2、使用 transition 标签实现单元素组件的过渡和动画效果 ##

### 出入场动画 ###

### 运行结果 ###

![image-20210613214526364.png][]

### 出入场动画 ###

### 运行结果 ###

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

### 给transition加个name ###

### 运行结果 ###

![image-20210613221046693.png][]

### 在transition标签具体指定出入场动画 ###

### 运行结果 ###

![image-20210613222357389.png][]

### 使用动画库Animate ###

> 官网：https://animate.style/
> 
> 中文网：http://www.animate.net.cn/

### 运行结果 ###

![image-20210613223252594.png][]

### 动画 + 过渡 ###

### 运行结果 ###

![image-20210613225921555.png][]

### 一个先执行完就是结束另一个 ###

> 如果过渡执行完了就结束动画，反之亦然

### 运行结果 ###

![image-20210613230514709.png][]

### 统一设置动画和过渡效果执行时长 ###

> 执行的节奏还是按钮原本设置的，这里只是设置多长事件结束效果

### 运行结果 ###

![image-20210613230923569.png][]

### 精准设置入场和出场动画时长 ###

### 运行结果 ###

![image-20210613231216779.png][]

### 使用js做动画 ###

> 代码演示了入场动画，出场动画也类似

<!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>
      
      <style>
        @keyframes shake {
         
          0%{
         
            transform: translateX(-100px);
          }
          50%{
         
            transform: translateX(-50px);
          }
          100%{
         
            transform: translateX(50px);
          }
        }
        /* 入场动画 */
        .v-enter-active {
         
          animation: shake 3s;
          transition: color 3s ease-in;
        }
        .v-enter-from{
         
          color: red
        }
        /* 出场动画 */
        .v-leave-active{
         
          animation: shake 3s;
          transition: color 3s ease-in;
        }
        .v-leave-from{
         
          color: seagreen;
        }
      </style>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data(){
         
          return{
         
            show: false
          }
        },
        methods:{
         
          shift(){
         
            this.show = !this.show;
          },
          // 动画执行前
          handleBeforeEnter(el){
         
            el.style.color = 'red';
          },
          // 动画执行中
          handleEnterActive(el, done){
         
            // 每隔 1s 执行
            const animation = setInterval(() => {
         
              if(el.style.color === 'red'){
         
                el.style.color = 'blue'
              }else{
         
                el.style.color = 'red'
              }
            }, 1000);
            // 5s 后执行：清除定时器
            setTimeout(() => {
         
              clearInterval(animation);
              // 执行 done() 表示动画执行结束了
              done();
            }, 5000);
          },
          // 动画执行后
          handleAfterEnter(el){
         
            console.log("动画执行结束了！");
          }
        },
        template: `
            <div>
              <transition
              :css="false"
              @before-enter="handleBeforeEnter"
              @enter="handleEnterActive"
              @after-enter="handleAfterEnter"
              >
                <div v-if="show">hello world!</div>
              </transition>
              <button @click="shift">切换</button>
            </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613232739213.png][]

[image-20210613214526364.png]: https://img-blog.csdnimg.cn/img_convert/00e02dfa35b9ee0a9a4de7c5dbb0b534.png
[image-20210613221046693.png]: https://img-blog.csdnimg.cn/img_convert/4754e3688e08debee062e462be67a522.png
[image-20210613222357389.png]: https://img-blog.csdnimg.cn/img_convert/6b0c4ec170dbe05508e8d68b98df8a0c.png
[image-20210613223252594.png]: https://img-blog.csdnimg.cn/img_convert/f0954f26e924dcf88d588aa3cb69b119.png
[image-20210613225921555.png]: https://img-blog.csdnimg.cn/img_convert/05b8ec4c868d400e6d778d7cc28c0744.png
[image-20210613230514709.png]: https://img-blog.csdnimg.cn/img_convert/654ec2523c0225e4501cb6a8c9bc5704.png
[image-20210613230923569.png]: https://img-blog.csdnimg.cn/img_convert/dc8ea7472d7d1629fd5c0301cd484212.png
[image-20210613231216779.png]: https://img-blog.csdnimg.cn/img_convert/f595acb40b8b8b7ae7e0c5b7ea6ae968.png
[image-20210613232739213.png]: https://img-blog.csdnimg.cn/img_convert/33a708d9c3f657d03fd6a2b3b7077c37.png