vue-自定义动画

<template>

  <div class="hello">

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

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

    <transition name="bounce"> 

        <img :src="pic1" v-show="show" alt="">

    </transition>  

  </div>

</template>

<script>

import pic1 from '../assets/logo.png'

export default {

  name: 'TransitionAndAnimateTwo',

  data() {

   return {

       show: true,

       pic1:pic1

   }

  }

}

</script>

 <style scoped>

  /* 进入的过程 */

   .bounce-enter-active{

      animation: bounce 1s;

   }

  /* 离开的过程 */

   .bounce-leave-active{

      animation: bounce 1s reverse;

   }

   @keyframes bounce{

     0% { transform: scale(0); }

     25% { transform: scale(0.2); }

     50% { transform: scale(0.4); }

     75% { transform: scale(0.6); }

     100% { transform: scale(1); }

   }

</style>