How can I make `leave` transition in general? about motion HOT 4 CLOSED

I am also confused about this.
looking at the code example:
https://github.com/vueuse/motion/blob/main/demo/src/demos/Transitions.vue

https://github.com/vueuse/motion/blob/efb8150197262cb4390c70667b2ea922070a4766/docs/variants.md

My first assumption was that i need to set up the import { useMotions } from '@vueuse/motion' to initialise.
I am getting:

TypeError: Cannot read property 'leave' of undefined

my code is:

    <transition :css="false" @leave="(el, done) => motions.cube.leave(done)">
        <sidebar
            v-if="showSidebar"
            v-motion
            :initial="{
                x: -400,
                opacity: 0,
            }"
            :enter="{
                x: 0,
                opacity: 1,
            }"
            :leave="{
                x: -400,
                opacity: 0,
            }"
        />
    </transition>

import { useMotions } from '@vueuse/motion'
import { ref } from '@vue/reactivity'
import sidebar from './sidebar.vue'
export default {
    components: {
        sidebar
    },
    setup() {
        const showSidebar = ref(false);
        const motions = useMotions()

        return { showSidebar, motions }
    }

}

i feel that the :leave || @leave is a bit obscure. Hope in a future release or doc update this is made a bit easier to implement :)

(edit) removing the cube solved it.

@leave="(el, done) => motions.cube.leave(done)" -> @leave="(el, done) => motions.leave(done)"

(edit 2) better yet. just name the transition in the v-motion directive.

v-motion="'cube'"

then

<transition :css="false" @leave="(el, done) => motions.cube.leave(done)">

from motion.

Hey;

I updated your CodeSandbox showing the path on how to implement what you asked.

I will try to get a better naming convention for the 2.0 of this package. 😄

It should work properly with the code here:
https://codesandbox.io/s/vueuse-motion-playground-forked-61xpz?file=/src/components/Modal.vue

I'm closing this issue, if any additional question feel free to re-open. 😄

from motion.

Hello, I'm trying to make a Reusable Modal with animation baked in using vueuse/motion. And I'm stuck with leave animation. I followed the demo folder's Transitions.vue and it is showing TypeError: Cannot read property 'leave' of undefined.

Which is as far as I know, in <transition :css="false" @leave="(el, done) => motions.pop.leave(done)"> code pop is undefined. Am I missing anything?

Here's is my code. https://codesandbox.io/s/vueuse-motion-playground-71ut4

your issue however was just because you imported the wrong module
you imported const motions = useMotion(); it should be:

import { useMotions } from "@vueuse/motion";
const motions = useMotions();

the naming convention blindsided me as well :)

https://codesandbox.io/s/vueuse-motion-playground-forked-7me8o

from motion.

Hello, I'm trying to make a Reusable Modal with animation baked in using vueuse/motion. And I'm stuck with leave animation. I followed the demo folder's Transitions.vue and it is showing TypeError: Cannot read property 'leave' of undefined.
Which is as far as I know, in <transition :css="false" @leave="(el, done) => motions.pop.leave(done)"> code pop is undefined. Am I missing anything?
Here's is my code. https://codesandbox.io/s/vueuse-motion-playground-71ut4

your issue however was just because you imported the wrong module
you imported const motions = useMotion(); it should be:

import { useMotions } from "@vueuse/motion";
const motions = useMotions();

the naming convention blindsided me as well :)

https://codesandbox.io/s/vueuse-motion-playground-forked-7me8o

Thanks @Fanna1119 , I didn't notice the extra s in useMontions. As you said hopefully maybe the next version of docs will help clarify this more.

from motion.