<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>
