maz-ui/dist/components/MazAnimatedElement.js

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { defineComponent, computed, ref, onMounted, nextTick, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, renderSlot } from "vue";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazAnimatedElement.DnsacpuB.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(), isAnimated = ref(!1);
    let observer = null, animationFrameId = null;
    function triggerAnimation() {
      animationFrameId = requestAnimationFrame(() => {
        element.value && (element.value.classList.remove("--invisible"), element.value.classList.add(animatedClass.value), isAnimated.value = !0);
      });
    }
    function resetAnimation() {
      element.value && (element.value.classList.add("--invisible"), element.value.classList.remove(animatedClass.value), isAnimated.value = !1);
    }
    return onMounted(() => {
      observer = new IntersectionObserver(([entry]) => {
        entry.isIntersecting && !isAnimated.value ? (nextTick(() => {
          setTimeout(triggerAnimation, __props.delay);
        }), __props.once === !0 && observer?.unobserve(entry.target)) : __props.once === !1 && !entry.isIntersecting && resetAnimation();
      }), element.value && observer.observe(element.value);
    }), onBeforeUnmount(() => {
      observer?.disconnect(), animationFrameId && cancelAnimationFrame(animationFrameId);
    }), (_ctx, _cache) => (openBlock(), createElementBlock("div", {
      ref_key: "element",
      ref: element,
      class: "m-animated-element m-reset-css --invisible",
      style: normalizeStyle({
        animationDuration: `${__props.duration}ms`
      })
    }, [
      renderSlot(_ctx.$slots, "default", {}, void 0, !0)
    ], 4));
  }
}), MazAnimatedElement = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5f500f94"]]);
export {
  MazAnimatedElement as default
};