Open jetlej opened 1 year ago
I'm sorry but I can't get the leave variant to work with the demo .... Does someone can post a working full exemple ?
Same here. Can't get any form of leave
transition working. There is a link to an example demo in the docs but not example code (from what I can see).
I have found other examples but this is the only one using composition API https://codesandbox.io/s/vueuse-motion-playground-forked-61xpz?file=/src/components/Modal.vue:122-176 - I have replicated this but in a Nuxt 3 project, is there anything else required on top of the above example to get leave
animations working with Nuxt 3?
Also been having issues trying to get it to work and what I have isn't perfect but it's just some observations I have.
@enter
and @leave
events on the transition<script setup lang="ts">
const myElement = ref<HTMLElement>();
const { leave, apply } = useMotion(lowerthird);
async function onEnter(_: HTMLElement, done: () => void) {
await apply({
y: 0,
opacity: 1,
});
done();
}
async function onLeave(_: HTMLElement, done: () => void) {
await apply({
y: 100,
opacity: 0,
});
leave(done);
}
</script>
<template>
<Transition @enter="onEnter" @leave="onLeave">
<div ref="myElement" v-if="isVisible" v-motion...></div>
</Transition>
</template>
I can't get @leave to work either..
I don't see any mentions in the documentation. Is this possible to do?