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