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

本文链接：https://blog.csdn.net/qq_29689343/article/details/118345440

文章目录

- 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>
  <!-- 引入Vue库 -->
  <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>

运行结果

使得它们”出入有序“

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>
  <!-- 引入Vue库 -->
  <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>

运行结果

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

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>
  <!-- 引入Vue库 -->
  <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>

运行效果

多个单组件动画切换

写法一：与多个但元素写法类似；

写法二：使用 :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>
  <!-- 引入Vue库 -->
  <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>