<template>

  <div class="hello">

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

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

    <transition 

      name="bounce"

      enter-active-class="animated rotateIn"

      leave-active-class="animated zoomOutUp"

      :duration="{enter:2000,leave:1000}"

      > 

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

    </transition>  

  </div>

</template>

<script>

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

export default {

  name: ‘TransitionAndAnimateThree‘,

  data() {

   return {

       show: true,

       pic1:pic1

   }

  }

}

</script>

 <style scoped> 

   @import url("https://cdn.jsdelivr.net/npm/animate.css@3.5.1");

</style>