【Vue3 从入门到实战进阶式掌握完整知识体系】021-Vue中的动画：组件和元素切换动画的实现

ゝ一世哀愁。 2023-10-03 09:38 7阅读 0赞

### 文章目录 ###

*   *  3、组件和元素切换动画的实现
     *   *  代码
         *  运行结果
         *  使得它们”出入有序“
         *  运行结果
         *  第一次渲染页面就有动画效果
         *  运行效果
         *  多个单组件动画切换
         *  运行结果

## 3、组件和元素切换动画的实现 ##

### 代码 ###

<!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>
        .v-leave-to,
        .v-enter-from{
         
          opacity: 0;
        }
        .v-leave-active,
        .v-enter-active{
         
          transition: opacity 3s ease-in;
        }
        .v-leave-from,
        .v-enter-to{
         
          opacity: 1;
        }
      </style>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data(){
         return{
         show: false}},
        methods:{
         
          shift(){
         
            this.show = !this.show;
          }
        },
        template: `
            <div>
              <transition>
                <div v-if="show">hello world!</div>
                <div v-else="show">bye world!</div>
              </transition>
              <button @click="shift">切换</button>
            </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613235735059.png][]

### 使得它们”出入有序“ ###

> mode=“out-in”

<!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>
        .v-leave-to,
        .v-enter-from{
         
          opacity: 0;
        }
        .v-leave-active,
        .v-enter-active{
         
          transition: opacity 3s ease-in;
        }
        .v-leave-from,
        .v-enter-to{
         
          opacity: 1;
        }
      </style>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data(){
         return{
         show: false}},
        methods:{
         
          shift(){
         
            this.show = !this.show;
          }
        },
        // mode="out-in"
        template: `
            <div>
              <transition mode="out-in">
                <div v-if="show">hello world!</div>
                <div v-else="show">bye world!</div>
              </transition>
              <button @click="shift">切换</button>
            </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210614000543676.png][]

### 第一次渲染页面就有动画效果 ###

> appear

<!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>
        .v-leave-to,
        .v-enter-from{
         
          opacity: 0;
        }
        .v-leave-active,
        .v-enter-active{
         
          transition: opacity 3s ease-in;
        }
        .v-leave-from,
        .v-enter-to{
         
          opacity: 1;
        }
      </style>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data(){
         return{
         show: false}},
        methods:{
         
          shift(){
         
            this.show = !this.show;
          }
        },
        template: `
            <div>
              <transition mode="out-in" appear>
                <div v-if="show">hello world!</div>
                <div v-else="show">bye world!</div>
              </transition>
              <button @click="shift">切换</button>
            </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行效果 ###

![image-20210614000858320.png][]

### 多个单组件动画切换 ###

> 写法一：与多个但元素写法类似；
> 
> 写法二：使用 :is 指令，和前面使用方法也非常类似；

<!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>
        .v-leave-to,
        .v-enter-from{
         
          opacity: 0;
        }
        .v-leave-active,
        .v-enter-active{
         
          transition: opacity 3s ease-in;
        }
        .v-leave-from,
        .v-enter-to{
         
          opacity: 1;
        }
      </style>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data(){
         return{
         currentItem: 'hello'}},
        methods:{
         
          shift(){
         
            if(this.currentItem === 'hello'){
         
              this.currentItem = 'bye'
            }else{
         
              this.currentItem = 'hello'
            }
          }
        },
        template: `
            <div>
              <transition mode="out-in" appear>
                <component :is="currentItem" />
              </transition>
              <button @click="shift">切换</button>
            </div>
        `
      });
    
      app.component("hello", {
         
        template: `
          <div>hello world!</div>
        `
      });
    
      app.component("bye", {
         
        template: `
          <div>bye world!</div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210614001706787.png][]

[image-20210613235735059.png]: https://img-blog.csdnimg.cn/img_convert/0cdb788d19561e276224b42144e9f6ce.png
[image-20210614000543676.png]: https://img-blog.csdnimg.cn/img_convert/fb0f1ed1da25f41bb5fd7cec87f5530f.png
[image-20210614000858320.png]: https://img-blog.csdnimg.cn/img_convert/c3f764eb8b82bd715e33d9fc874456ad.png
[image-20210614001706787.png]: https://img-blog.csdnimg.cn/img_convert/c5f1b593b5e29287921ee10797db3351.png