jxrory-fe-basic-lib v0.1.3

jxrory-fe-basic-lib

jxrory 前端基础库, 一些通用功能的封装

功能介绍

1. 使用 canvas 构建波浪动效;
2. wow 元素离开视窗后对动画进行重做;

安装方法

使用 npm ： npm install jxrory-fe-basic-lib

用法

波浪特效

在 vue 中使用波浪特效:

<template>
  <canvas ref="refEffectWaveCanvas"></canvas>
</template>

<script setup lang="ts">
import { onMounted, Ref, ref } from "vue";
import { Wave } from "jxrory-fe-basic-lib";

const refEffectWaveCanvas: Ref<Element | null> = ref(null);

onMounted(() => {
  if (refEffectWaveCanvas.value) {
    new Wave(refEffectWaveCanvas.value, {
      bgStyle: {
        x1: 0,
        y1: 0,
        x2: 1,
        y2: 1,
        color1: "#c2bb39cc",
        color2: "#49af4fcc",
      },
    });
  }
});
</script>

动画重做

for vue3

import { wowRedoExt, WowRedoType } from "jxrory-fe-basic-lib";
import { ComponentInternalInstance } from "vue";

const { WOW } = require("wowjs");

export interface WowType {
  wow: any;
  observer: IntersectionObserver | null;
  unmounted: (() => void) | undefined;
}

export function wowRedo(instance: ComponentInternalInstance | null): WowType {
  const wow = new WOW();
  wow.init();

  if (!instance) {
    return { wow, observer: null, unmounted: undefined };
  }

  // 获取 `wow-redo` class name 进行动画重放
  const els = instance?.proxy?.$el.getElementsByClassName("wow-redo");

  // 回调
  let redoExt: WowRedoType | null = null;
  if (els) {
    redoExt = wowRedoExt(wow, els);
  }

  return {
    wow,
    observer: redoExt?.observer || null,
    unmounted: () => {
      redoExt && redoExt?.unmounted && redoExt?.unmounted();
    },
  };
}