2. Use the Transition tag to animate single element components

Exit animation

<! 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>
    /* Entrance animation (transition) */
    .v-enter-from{
      opacity: 0;
    }
    .v-enter-active {
      transition: opacity 3s ease-out;
    }
    .v-enter-to{
      opacity: 1;
    }
    /* Exit animation (transition) */
    .v-leave-from{
      opacity: 1;
    }
    .v-leave-active{
      transition: opacity 3s ease-out;
    }
    .v-leave-to{
      opacity: 0;
    }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        show: false}},methods: {shift(){
        this.show = !this.show; }},template: ` 
       
 
         
         

          hello world! 
         
 
         < button@click ="shift"> Switch  
       
 '
  });

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

</html>
Copy the code

The results

Exit animation

<! 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>
    @keyframes shake {
      0%{
        transform: translateX(-100px);
      }
      50%{
        transform: translateX(-50px);
      }
      100%{
        transform: translateX(50px); }}/* Enter animation */
    .v-enter-active {
      animation: shake 3s;
    }
    /* Animation */
    .v-leave-active{
      animation: shake 3s;
    }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        show: false}},methods: {shift(){
        this.show = !this.show; }},template: ` 
       
 
         
         

          hello world! 
         
 
         < button@click ="shift"> Switch  
       
 '
  });

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

</html>
Copy the code

The results

I’ll give transition a name

<! 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>
    @keyframes shake {
      0%{
        transform: translateX(-100px);
      }
      50%{
        transform: translateX(-50px);
      }
      100%{
        transform: translateX(50px); }}/* This should start with hello */
    /* Enter animation */
    .hello-enter-active {
      animation: shake 3s;
    }
    /* Animation */
    .hello-leave-active{
      animation: shake 3s;
    }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        show: false}},methods: {shift(){
        this.show = !this.show; }},// Set transition name='hello'
    // V-show can also be used for animation
    template: ` 
       
 
         
         

          hello world! 
         
 
         < button@click ="shift"> Switch  
       
 '
  });

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

</html>
Copy the code

The results

Specify an entry animation in the Transition TAB

<! 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>
    @keyframes shake {
      0%{
        transform: translateX(-100px);
      }
      50%{
        transform: translateX(-50px);
      }
      100%{
        transform: translateX(50px); }}/* This should start with hello */
    /* Enter animation */
    .hello {
      animation: shake 3s;
    }
    /* Animation */
    .bye {
      animation: shake 3s;
    }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        show: false}},methods: {shift(){
        this.show = !this.show; }},template: ` 
       
 
         
         

          hello world! 
         
 
         < button@click ="shift"> Switch  
       
 '
  });

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

</html>
Copy the code

The results

Use Animate

Liverpoolfc.tv: the animate. Style /

Chinese website: www.animate.net.cn/

<! 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>
  <!-- 引入Animate样式 cdn地址 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        show: false}},methods: {shift(){
        this.show = !this.show; }},template: ` 
       
 
         
         

          hello world! 
         
 
         < button@click ="shift"> Switch  
       
 '
  });

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

</html>
Copy the code

The results

Animation + Transition

<! 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>
    @keyframes shake {
      0%{
        transform: translateX(-100px);
      }
      50%{
        transform: translateX(-50px);
      }
      100%{
        transform: translateX(50px); }}/* Enter animation */
    .v-enter-active {
      animation: shake 3s;
      transition: color 3s ease-in;
    }
    .v-enter-from{
      color: red
    }
    /* Animation */
    .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; }},template: ` 
       
 
         
         

          hello world! 
         
 
         < button@click ="shift"> Switch  
       
 '
  });

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

</html>
Copy the code

The results

If one finishes first, the other finishes

End the animation if the transition completes, and vice versa

<! 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>
    @keyframes shake {
      0%{
        transform: translateX(-100px);
      }
      50%{
        transform: translateX(-50px);
      }
      100%{
        transform: translateX(50px); }}/* Enter animation */
    .v-enter-active {
      animation: shake 10s;
      transition: color 3s ease-in;
    }
    .v-enter-from{
      color: red
    }
    /* Animation */
    .v-leave-active{
      animation: shake 10s;
      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; }},// type="transition" indicates that the transition effect prevails
    // type="animation" indicates that the animation effect prevails
    template: ` 
       
 
         
         

          hello world! 
         
 
         < button@click ="shift"> Switch  
       
 '
  });

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

</html>
Copy the code

The results

Set the execution duration of animation and transition effects uniformly

The timing of the execution is still the same as the button’s original setting. It’s just how long the event ends

<! 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>
    @keyframes shake {
      0%{
        transform: translateX(-100px);
      }
      50%{
        transform: translateX(-50px);
      }
      100%{
        transform: translateX(50px); }}/* Enter animation */
    .v-enter-active {
      animation: shake 10s;
      transition: color 3s ease-in;
    }
    .v-enter-from{
      color: red
    }
    /* Animation */
    .v-leave-active{
      animation: shake 10s;
      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; }},// Understand the end effect after 1000 milliseconds
    template: ` 
       
 
         
         

          hello world! 
         
 
         < button@click ="shift"> Switch  
       
 '
  });

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

</html>
Copy the code

The results

Accurately set the duration of entrance and appearance animation

<! 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>
    @keyframes shake {
      0%{
        transform: translateX(-100px);
      }
      50%{
        transform: translateX(-50px);
      }
      100%{
        transform: translateX(50px); }}/* Enter animation */
    .v-enter-active {
      animation: shake 3s;
      transition: color 3s ease-in;
    }
    .v-enter-from{
      color: red
    }
    /* Animation */
    .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; }},// Understand the end effect after 1000 milliseconds
    // Precise control
    template: ` 
       
 
         
         

          hello world! 
         
 
         < button@click ="shift"> Switch  
       
 '
  });

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

</html>
Copy the code

The results

Use JS for animation

The code demonstrates the entry animation, as does the exit animation

<! 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>
    @keyframes shake {
      0%{
        transform: translateX(-100px);
      }
      50%{
        transform: translateX(-50px);
      }
      100%{
        transform: translateX(50px); }}/* Enter animation */
    .v-enter-active {
      animation: shake 3s;
      transition: color 3s ease-in;
    }
    .v-enter-from{
      color: red
    }
    /* Animation */
    .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;
      },
      // before the animation executes
      handleBeforeEnter(el){
        el.style.color = 'red';
      },
      // The animation is executing
      handleEnterActive(el, done){
        // Execute every 1s
        const animation = setInterval(() = > {
          if(el.style.color === 'red'){
            el.style.color = 'blue'
          }else{
            el.style.color = 'red'}},1000);
        // After 5s, clear the timer
        setTimeout(() = > {
          clearInterval(animation);
          // Execute done() to indicate that animation execution is finished
          done();
        }, 5000);
      },
      // After the animation is executed
      handleAfterEnter(el){
        console.log("Animation execution finished!"); }},template: ` 
       
 
         
         

          hello world! 
         
 
         < button@click ="shift"> Switch  
       
 '
  });

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

</html>
Copy the code

The results