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>
64 lines (63 loc) • 2.34 kB
JavaScript
import { Feature } from "../feature.mjs";
import { HTMLProjectionNode } from "../../external/.pnpm/framer-motion@12.23.12/external/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs";
import { getClosestProjectingNode } from "./utils.mjs";
import { addScaleCorrector } from "../../external/.pnpm/framer-motion@12.23.12/external/framer-motion/dist/es/projection/styles/scale-correction.mjs";
import { defaultScaleCorrector } from "./config.mjs";
import { isHTMLElement } from "../gestures/drag/utils/is.mjs";
import { doneCallbacks } from "../../components/animate-presence/presence.mjs";
class ProjectionFeature extends Feature {
constructor(state) {
super(state);
addScaleCorrector(defaultScaleCorrector);
}
initProjection() {
const options = this.state.options;
this.state.visualElement.projection = new HTMLProjectionNode(
this.state.visualElement.latestValues,
options["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(this.state.visualElement.parent)
);
this.state.visualElement.projection.isPresent = true;
this.setOptions();
}
beforeMount() {
this.initProjection();
}
setOptions() {
const options = this.state.options;
this.state.visualElement.projection.setOptions({
layout: options.layout,
layoutId: options.layoutId,
alwaysMeasureLayout: Boolean(options.drag) || options.dragConstraints && isHTMLElement(options.dragConstraints),
visualElement: this.state.visualElement,
animationType: typeof options.layout === "string" ? options.layout : "both",
// initialPromotionConfig
layoutRoot: options.layoutRoot,
layoutScroll: options.layoutScroll,
crossfade: options.crossfade,
onExitComplete: () => {
var _a;
if (!((_a = this.state.visualElement.projection) == null ? void 0 : _a.isPresent)) {
const done = doneCallbacks.get(this.state.element);
this.state.isSafeToRemove = true;
if (done) {
done({
detail: {
isExit: true
}
}, true);
}
}
}
});
}
update() {
this.setOptions();
}
mount() {
var _a;
(_a = this.state.visualElement.projection) == null ? void 0 : _a.mount(this.state.element);
}
}
export {
ProjectionFeature
};