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>
52 lines (51 loc) • 1.54 kB
JavaScript
import { Feature } from "../../feature.mjs";
import { hover } from "../../../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/gestures/hover.mjs";
import { extractEventInfo } from "../press/index.mjs";
import { frame } from "../../../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/frameloop/frame.mjs";
function handleHoverEvent(state, event, lifecycle) {
const props = state.options;
if (props.whileHover) {
state.setActive("whileHover", lifecycle === "Start");
}
const eventName = `onHover${lifecycle}`;
const callback = props[eventName];
if (callback) {
frame.postRender(() => callback(event, extractEventInfo(event)));
}
}
class HoverGesture extends Feature {
isActive() {
const { whileHover, onHoverStart, onHoverEnd } = this.state.options;
return Boolean(whileHover || onHoverStart || onHoverEnd);
}
constructor(state) {
super(state);
}
mount() {
this.register();
}
update() {
const { whileHover, onHoverStart, onHoverEnd } = this.state.visualElement.prevProps;
if (!(whileHover || onHoverStart || onHoverEnd)) {
this.register();
}
}
register() {
const element = this.state.element;
if (!element || !this.isActive())
return;
this.unmount();
this.unmount = hover(
element,
(el, startEvent) => {
handleHoverEvent(this.state, startEvent, "Start");
return (endEvent) => {
handleHoverEvent(this.state, endEvent, "End");
};
}
);
}
}
export {
HoverGesture
};