46 lines
976 B
Vue
46 lines
976 B
Vue
<template>
|
|
<view v-show="internalShow" :style="fadeStyle" class="fade-wrapper">
|
|
<slot />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from 'vue';
|
|
|
|
const props = defineProps({
|
|
show: { type: Boolean, default: false },
|
|
duration: { type: Number, default: 300 }, // ms
|
|
});
|
|
|
|
const internalShow = ref(props.show);
|
|
const fadeStyle = ref({
|
|
opacity: props.show ? 1 : 0,
|
|
transition: `opacity ${props.duration}ms ease`,
|
|
});
|
|
|
|
watch(
|
|
() => props.show,
|
|
(val) => {
|
|
if (val) {
|
|
internalShow.value = true;
|
|
requestAnimationFrame(() => {
|
|
fadeStyle.value.opacity = 1;
|
|
});
|
|
} else {
|
|
fadeStyle.value.opacity = 0;
|
|
// 动画结束后隐藏 DOM
|
|
setTimeout(() => {
|
|
internalShow.value = false;
|
|
}, props.duration);
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fade-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|