vue-自带动画

<template>

  <div class="hello">

    <button @click="show = !show">切换</button>

    <P>-----------------------</P>

    <transition name="fade"> 

        <div class="box" v-if="show">学院</div>

    </transition>  

  </div>

</template>

<script>

export default {

  name: 'TransitionAndAnimateOne',

  data() {

   return {

       show: true

   }

  }

}

</script>

 <style scoped>

 .box{

     width: 200px;

     height: 200px;

     background-color: skyblue;

     color: #fff;

     font-size: 20px;

     display: flex;

     justify-content: center;

     align-items: center;

     border-radius: 50%;

 }

 .fade-enter, .fade-leave-to{

     opacity: 0;

 }

 .fade-enter-active, .fade-leave-active{

    transition: opacity 2s ease-in-out;

 }

 

</style>