Do not use animation

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    Requirements: click the button to display h3, and then click to hide h3 -- >
    < H3 V-IF = "flag" > this is an H3</h3>
  </div>

// Create Vue instance to get ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });

Using transition class name to realize animation

/*<!-- 2. Customize two groups of styles to control the elements inside the transition to implement animation -- >*/
/* v-enter [This is a time point] is the starting state of the element before entering, and it has not yet started to enter */
    /* v-leave-to [This is a time point] is the ending state of the animation after it leaves. At this time, the element animation has ended */
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }

    /* v-enter-active [Time period of entrance animation] */
    /* v-leave-active [Time period of departure animation] */
    .v-enter-active,
    .v-leave-active{
      transition: all 0.8s ease;
    }

// Create Vue instance to get ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });

// Create Vue instance to get ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });

Modify the prefix of vue

 /* v-enter [This is a time point] is the starting state of the element before entering, and it has not yet started to enter */
    /* v-leave-to [This is a time point] is the ending state of the animation after it leaves. At this time, the element animation has ended */
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }

    /* v-enter-active [Time period of entrance animation] */
    /* v-leave-active [Time period of departure animation] */
    .v-enter-active,
    .v-leave-active{
      transition: all 0.8s ease;
    }




    .my-enter,
    .my-leave-to {
      opacity: 0;
      transform: translateY(70px);
    }

    .my-enter-active,
    .my-leave-active{
      transition: all 0.8s ease;
    }

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    Requirements: click the button to display h3, and then click to hide h3 -- >
    Use the transition element to wrap the elements that need to be controlled by animation -- >
    <! -- transition element, officially provided by Vue -- >
    <transition>
      < H3 V-IF = "flag" > this is an H3</h3>
    </transition>


    <hr>

    <input type="button" value="toggle2" @click="flag2=!flag2">
    <transition name="my">
      < H6 V-IF = "Flag2" > this is an H6 < / H6 >
    </transition>
  </div>

 /* v-enter [This is a time point] is the starting state of the element before entering, and it has not yet started to enter */
    /* v-leave-to [This is a time point] is the ending state of the animation after it leaves. At this time, the element animation has ended */
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }

    /* v-enter-active [Time period of entrance animation] */
    /* v-leave-active [Time period of departure animation] */
    .v-enter-active,
    .v-leave-active{
      transition: all 0.8s ease;
    }




    .my-enter,
    .my-leave-to {
      opacity: 0;
      transform: translateY(70px);
    }

    .my-enter-active,
    .my-leave-active{
      transition: all 0.8s ease;
    }

Third party class to realize animation

Need to import css file: < link rel = "stylesheet" href = ". / lib / animate. css" >

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- Requirement: click the button to h3 Display, click again, let's h3 hide -->
    <!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
      <h3 v-if="flag">This is a H3</h3>
    </transition> -->

    <!-- Use :duration="Millisecond value" To uniformly set the animation duration when entering and leaving the venue -->
    <!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
      <h3 v-if="flag" class="animated">This is a H3</h3>
    </transition> -->

    <!-- Use  :duration="{ enter: 200, leave: 400 }"  To set the time for entering and leaving the venue respectively  -->
    <transition 
    enter-active-class="bounceIn" 
    leave-active-class="bounceOut" 
    :duration="{ enter: 200, leave: 400 }">
      <h3 v-if="flag" class="animated">This is a H3</h3>
    </transition> 
  </div>

// Create Vue instance to get ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });