如何限制react-animate-on-scroll仅在向下滚动时触发动画？

要实现只在向下滚动时触发动画，核心是通过滚动方向判断结合组件的控制属性来限制动画执行时机，具体步骤如下：

1. 跟踪滚动方向 #

在你的组件中添加状态来记录当前滚动方向和上一次的滚动位置，通过监听window的scroll事件来更新状态：

import { useState, useEffect } from 'react';
import ScrollAnimation from 'react-animate-on-scroll';

function YourComponent() {
  // 记录是否向下滚动
  const [isScrollingDown, setIsScrollingDown] = useState(false);
  // 记录上一次的滚动位置
  const [lastScrollY, setLastScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      const currentScrollY = window.scrollY;
      // 对比当前和上次滚动位置，判断是否向下滚动
      setIsScrollingDown(currentScrollY > lastScrollY);
      setLastScrollY(currentScrollY);
    };

    window.addEventListener('scroll', handleScroll);
    // 组件卸载时移除监听
    return () => window.removeEventListener('scroll', handleScroll);
  }, [lastScrollY]);

  // ... 其他组件逻辑
}

2. 控制动画触发时机 #

给ScrollAnimation组件添加shouldAnimate属性，将其值设置为我们记录的isScrollingDown，这样只有向下滚动时才会触发动画：

<ScrollAnimation 
  animateIn='fadeInUp' 
  duration={0.7}
  shouldAnimate={isScrollingDown}
>
  <h1 className='mb-4'>Text with animation</h1>
</ScrollAnimation>

额外说明 #

• 如果希望元素第一次进入视图后仅触发一次动画（后续滚动不再重复执行），可以额外添加animateOnce={true}属性：

  <ScrollAnimation 
    animateIn='fadeInUp' 
    duration={0.7}
    shouldAnimate={isScrollingDown}
    animateOnce={true}
  >
    <h1 className='mb-4'>Text with animation</h1>
  </ScrollAnimation>
  

• shouldAnimate是react-animate-on-scroll官方提供的控制开关，直接决定组件是否执行动画逻辑，完美适配我们的需求。

内容的提问来源于stack exchange，提问作者Techie_T