motion-v
Version:
<p align="center"> <img width="100" height="100" alt="Motion logo" src="https://user-images.githubusercontent.com/7850794/164965523-3eced4c4-6020-467e-acde-f11b7900ad62.png" /> </p> <h1 align="center">Motion for Vue</h1>
32 lines (31 loc) • 991 B
JavaScript
import { ref, onUnmounted } from "vue";
import { createScopedAnimate } from "../../external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/animation/animate/index.mjs";
function useAnimate() {
const dom = ref(null);
const domProxy = new Proxy(dom, {
get(target, key) {
if (typeof key === "string" || typeof key === "symbol") {
if (key === "current")
return Reflect.get(target, "value");
return Reflect.get(target, key);
}
return void 0;
},
set(target, key, value) {
if (key === "value")
return Reflect.set(target, key, (value == null ? void 0 : value.$el) || value);
if (key === "animations")
return Reflect.set(target, key, value);
return true;
}
});
domProxy.animations = [];
const animate = createScopedAnimate(domProxy);
onUnmounted(() => {
domProxy.animations.forEach((animation) => animation.stop());
});
return [domProxy, animate];
}
export {
useAnimate
};