vue3+ts项目封装scrollReveal方法_vue3 scrollreveal-CSDN博客

1. 安装scrollReveal：npm install scrollreveal

2. 封装：

import { reactive } from 'vue'
import scrollReveal from 'scrollreveal'

// 1. scrollReveal初始化
const scrollRevealData = reactive({
  // 在reactive()中声明scrollReveal组件
  scrollReveal: scrollReveal()
})

// 2.导出设置scrollReveal的方法
export const useScrollReveal = (
  el: string = '.reveal-left',
  {
    position = 'bottom',
    distance = '20px',
    scale = 1,
    opacity = 0,
    duration = 800,
    delay = 100,
    easing = 'cubic-bezier(0.5, 0, 0, 1)'
  }: {
    position?: string
    distance?: string
    scale?: number
    opacity?: number
    duration?: number
    delay?: number
    easing?: string
  } = {}
) => {
  // el：类名
  scrollRevealData.scrollReveal.reveal(el, {
    duration: duration, // 动画的时长
    delay: delay, // 延迟时间
    origin: position, // 动画开始的位置，'bottom', 'left', 'top', 'right'
    reset: true, // 回滚的时候是否再次触发动画
    // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
    // // useDelay: 'onload',
    mobile: true, // 在移动端是否使用动画
    distance: distance, // 滚动的距离，单位可以用%，rem等
    opacity: opacity, // 执行方式（透明度）
    easing: easing, // 执行速度 线性函数等cubic-bezier(0.5, 0, 0, 1)
    scale: scale // 执行方式（缩放）
    // 使用执行之前的回调函数
    // beforeReveal: function (ele: HTMLElement) {}
  })
}

3. 页面使用：

// 模板部分
<div class="reveal-top">
    文案
</div>

// js部分
import { useScrollReveal } from '@/useScrollReveal'

onMounted(() => {
    useScrollReveal('.reveal-top, { delay: 200, duration: 1200 }')
})

参考：

https://zhuanlan.zhihu.com/p/462298873?utm_id=0；

https://www.cnblogs.com/fzkbk/p/14750242.html