<template>
<div style="height:100vh">
<button @click="show = !show">打开</button>
<!-- 弹窗右切效果 -->
<transition name="fade">
<div v-show="show" style="width: 100%;height:100%;background-color: #ff0000;"></div>
</transition>
</div>
</template>
<script>
export default {
data(){
return{
show:false
}
}
};
</script>
<style>
.fade-enter-active{
animation-name:fadeInRight;animation-duration:.5s;
}
.fade-leave-active{
animation-name:fadeOutRight;animation-duration:.5s;
}
</style>
