<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>
