nuxt3.0+scrollreveal动画插件实现页面滚动加载动画效果

news2024/11/25 4:21:33

项目安装 npm install scrollreveal --save

在src下创建plugins文件夹，写入名为scrollreveal.client.ts的文件。

import { defineNuxtPlugin } from "#app";
import scrollReveal from 'scrollreveal'
 
export default defineNuxtPlugin((nuxtApp) => {
    let data = scrollReveal();
      return {
        provide: {
            scrollReveal: data,
        },
      }
});

2.在components文件夹下创建名为RevealAnimation.vue的文件

<template>
    <div :id="ID" className="load-hidden">
        <slot></slot>
    </div>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const props = defineProps({
    options: {
        type: Object,
        default: () => ({
            // 动画的时长
            duration: 800,
            // 延迟时间
            delay: 100,
            // 动画开始的位置，'bottom', 'left', 'top', 'right'
            origin: 'bottom',
            // 回滚的时候是否再次触发动画
            reset: false,
            // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
            useDelay: 'onload',
            // 在移动端是否使用动画
            mobile: true,
            // 滚动的距离，单位可以用%，rem等
            distance: '5rem',
            // 其他可用的动画效果
            opacity: 0.01,
            // 执行速度 线性函数啥的
            easing: 'ease-in-out',
            // 执行方式（缩放）
            scale: 0.9,
        }),
    },
    ID: {
        type: String,
        default: 'reveal',
    },
});
const { $scrollReveal } = useNuxtApp()
 
 
onMounted(() => {
    if (process.client) {
        retScroll($scrollReveal);
    }
});
 
const retScroll = (data: any) => {
    data.reveal(`#${props.ID}`, { ...props.options })
};
</script>
  
<style scoped>
.load-hidden {
    visibility: hidden;
}
</style>

3.utils文件夹封装tool.ts

在这里插入图片描述


export const createAnimationOptions = (origin: string, duration: number, scale: number) => {
    return {
        // 动画的时长
        duration: duration || 800,
        // 延迟时间
        delay: 100,
        // 动画开始的位置，'bottom', 'left', 'top', 'right'
        origin: origin || 'bottom',
        // 回滚的时候是否再次触发动画
        reset: false,
        // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
        useDelay: 'always',
        // 在移动端是否使用动画
        // mobile: true,
        // 滚动的距离，单位可以用%，rem等
        distance: '5rem',
        // 其他可用的动画效果
        opacity: 0.01,
        // 执行速度 线性函数啥的
        easing: 'ease-in-out',
        // 执行方式（缩放）
        scale: scale || 0.9,
    };
}