diff --git a/src/components/RayScrollReveal/index.tsx b/src/components/RayScrollReveal/index.tsx index f2abbdab..adc3b479 100644 --- a/src/components/RayScrollReveal/index.tsx +++ b/src/components/RayScrollReveal/index.tsx @@ -6,29 +6,56 @@ const RayScrollReveal = defineComponent({ name: 'RayScrollReveal', props: { options: { + // ScrollReveal reveal options type: Object as PropType, }, + width: { + type: String, + }, + reset: { + type: Boolean, + default: false, + }, }, emits: ['scrollRevealSync'], setup(props, { emit }) { const scrollRevealRef = ref() + const cssVarsRef = computed(() => { + const scsVars = { + '--ray-scroll-reveal-width': props.width, + } + return scsVars + }) + let scrollRevealCore: scrollReveal.ScrollRevealObject + + /** + * + * 为 `dom` 注册 `ScrollReveal` 动画效果 + */ const handleRegisterScrollReveal = async () => { const el = scrollRevealRef.value as HTMLElement const defaultOptions = { distance: '50px', duration: 600, - reset: true, + reset: props.reset, easing: 'ease', scale: 0.99, mobile: true, } - ScrollReveal().reveal(el, Object.assign(defaultOptions, props.options)) + scrollRevealCore = ScrollReveal().reveal( + el, + Object.assign(defaultOptions, props.options), + ) } + /** + * + * 处理 `dom` 新增后无法绑定过渡动画情况 + */ const handleScrollRevealSync = async () => { - const { sync } = ScrollReveal() + const { sync } = scrollRevealCore emit('scrollRevealSync', sync) } @@ -40,11 +67,16 @@ const RayScrollReveal = defineComponent({ return { scrollRevealRef, + cssVarsRef, } }, render() { return ( -
+
{this.$slots.default?.()}
)