49 lines
1.4 KiB
Vue
49 lines
1.4 KiB
Vue
|
<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>
|