maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
34 lines (33 loc) • 1.69 kB
JavaScript
import { defineComponent, computed, ref, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, renderSlot } from "vue";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazAnimatedElement.B4mV3dWm.css';const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "MazAnimatedElement",
props: {
direction: { default: "up" },
delay: { default: 0 },
duration: { default: 2e3 },
once: { type: Boolean, default: !0 }
},
setup(__props) {
const animatedClass = computed(() => `animate-slide-${__props.direction}-blur`), element = ref();
let observer = null;
return onMounted(() => {
observer = new IntersectionObserver(([entry]) => {
entry.isIntersecting ? (entry.target.classList.remove("--invisible"), entry.target.classList.add(animatedClass.value), __props.once === !0 && observer?.unobserve(entry.target)) : __props.once === !1 && (entry.target.classList.add("--invisible"), entry.target.classList.remove(animatedClass.value));
}), element.value && observer.observe(element.value);
}), onBeforeUnmount(() => observer?.disconnect()), (_ctx, _cache) => (openBlock(), createElementBlock("div", {
ref_key: "element",
ref: element,
class: "m-animated-element m-reset-css --invisible",
style: normalizeStyle({
animationDuration: `${_ctx.duration}ms`,
animationDelay: `${_ctx.delay}ms`
})
}, [
renderSlot(_ctx.$slots, "default", {}, void 0, !0)
], 4));
}
}), MazAnimatedElement = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c463d914"]]);
export {
MazAnimatedElement as default
};