在transition组件上使用name属性,然后写对应动画的样式即可
例如:
name=“fade”
进入样式为:
fade-enter-from
fade-enter-active
fade-enter-to
离开样式为:
fade-leave-from
fade-leave-active
fade-leave-to
<template>
<div class="content">
<button @click="flag = !flag">switch</button>
<transition name="fade">
<div v-if="flag" class="box"></div>
</transition>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
defineProps<{ msg: string }>()
const count = ref(0)
const flag = ref<boolean>(false)
</script>
<style scoped>
.content{
width:600px;
height:600px;
}
.box{
width:200px;
height:200px;
background-color: red;
}
.fade-enter-from{
width:0;
height:0;
transform: rotate(360deg);
}
.fade-enter-active{
transition: all 1s ease;
}
.fade-enter-to{
width:200px;
height:200px;
}
.fade-leave-from{
width:200px;
height:200px;
transform: rotate(360deg);
}
.fade-leave-active{
transition: all 5s ease;
}
.fade-leave-to{
width:0;
height:0;
}
</style>