first commit

components/Ml/transition/MlTransitionFade.vue

@@ -0,0 +1,48 @@
+<script lang="ts">
+import { h, Transition } from 'vue';
+
+export default defineNuxtComponent({
+    // name: 'MaalTransitionFade',
+    props: {
+        name: {
+            type: String,
+            default: 'fade'
+        },
+        duration: {
+            type: Number,
+            default: 300
+        },
+        delay: {
+            type: Number,
+            default: 200
+        }
+    },
+    setup(props, { slots }) {
+        return () => {
+            return h(
+                Transition,
+                {
+                    name: props.name,
+                    css: false,
+                    onBeforeEnter(el: any) {
+                        el.style.transition = `opacity ${props.duration}ms ${props.delay}ms ease;`;
+                        el.style.opacity = 0;
+                    },
+                    onEnter(el: any, done) {
+                        requestAnimationFrame(() => {
+                            el.style.opacity = 1;
+                            done();
+                        });
+                    },
+                    onLeave(el: any, done) {
+                        el.style.transition = `opacity ${props.duration}ms ${props.delay}ms ease;`;
+                        el.style.opacity = 0;
+                        setTimeout(done, props.duration);
+                    }
+                },
+                slots.default
+            );
+        };
+    }
+});
+</script>