vuecli动画

<template>
  <div class="school">
    <button @click="isShow=!isShow" >显示/隐藏</button>
    
    <transition :appear="true">
      <h2 v-show="isShow"> 你好啊</h2>
    </transition>
  </div>
</template>

<script>
import {nanoid} from 'nanoid'

export default {
    name:"School",
    data() {
      return {
        isShow:true
      }
    },
    
}
</script>

<style scope>
   h2{
    background-color: aqua
  }
  .v-enter-active{
    animation:xiaobai 1s
  }
  .v-leave-active{
    animation:xiaobai 1s reverse;
  }
  @keyframes xiaobai{
    from {
      transform:translateX(-100px)
    }
    to{
       transform:translateX(0px)
    }
  }
</style>

<template>
  <div id="app">
    <School></School>
  </div>
</template>

<script>
// import {nanoid} from 'nanoid'
  //引入school 组件
  import School from './components/School.vue'

  export default {
    name: 'app',
    components: {
      School
    }
  }
</script>

<style scope>

</style>