3, component and element switch animation implementation

code

<! DOCTYPEhtml>
<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 library -->
  <script src="https://unpkg.com/vue@next"></script>
  <! - style -- -- >
  <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">switch</button>
        </div>`}); const vm = app.mount('#root');</script>

</html>
Copy the code

The results

To get them in and out of order.

mode=”out-in”

<! DOCTYPEhtml>
<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 library -->
  <script src="https://unpkg.com/vue@next"></script>
  <! - style -- -- >
  <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">switch</button>
        </div>`}); const vm = app.mount('#root');</script>

</html>
Copy the code

The results

The first time you render the page, you animate it

appear

<! DOCTYPEhtml>
<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 library -->
  <script src="https://unpkg.com/vue@next"></script>
  <! - style -- -- >
  <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">switch</button>
        </div>`}); const vm = app.mount('#root');</script>

</html>
Copy the code

Running effect

Multiple single component animation switches

Writing 1. Similar to writing multiple but elements;

Use the :is command, and the previous use of the method is very similar;

<! DOCTYPEhtml>
<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 library -->
  <script src="https://unpkg.com/vue@next"></script>
  <! - style -- -- >
  <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: ` 
       
 
         
          
         
         
       
 '
  });

  app.component("hello", {
    template: ` 
       

        hello world! 
       
 `
  });

  app.component("bye", {
    template: ` 
       

        bye world! 
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results