flat:AI+

components/FadeView/FadeView.vue

@@ -0,0 +1,45 @@
+<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>