使用可见性传感器和 useEffect 来自 react-spring 的动画触发太快答案

【问题标题】：Animation from react-spring fires off too fast with visibility-sensor and useEffect使用可见性传感器和 useEffect 来自 react-spring 的动画触发太快
【发布时间】：2020-09-02 13:37:55
【问题描述】：

我有包装器 React 组件，它使用 react-spring 和可见性传感器使其子组件从右侧淡入并将不透明度从 0 更改为 1。 useEffect 和 useState 都使孩子在第一次滚动后只出现一次。

问题是动画显示太快 - 从右侧到结束位置的 50 像素没有变换。图片/文本 - 当我滚动时，组件子组件会弹出。

这是该组件的代码：

import React, { useEffect, useState } from 'react';
import { Spring, config } from 'react-spring/renderprops';
import VisibilitySensor from 'react-visibility-sensor';

export const FadeInContainer = ({
 children
}: any) => {
 const [isVisible, setVisibility] = useState(false);
 const [entered, setEntered] = useState(false);

 const onChange = (visiblity: any) => {
  setTimeout(() => {
   setVisibility(visiblity);
  }, 200);
 };

 useEffect(() => {
  if (isVisible) {
   setEntered(true);
  }
 }, [isVisible]);

 const FadeInDirection = () => {
  return (
   <Spring
    delay={500}
    config={config.slow}
    to={{
     opacity: entered ? 1 : 0,
     transform: entered ? 'translateY(0)' : 'translateY(50px)'
    }}
   >
    {({ opacity, transform }) => (
     <div style={{ opacity, transform }}>{children}</div>
    )}
   </Spring>
  );
 };

 return (
  <VisibilitySensor onChange={onChange}>
   <FadeInDirection />
  </VisibilitySensor>
 );
};

我已经尝试过的： 1、在useEffect中添加setTimeouts，onChange定义同上。 2.尝试为可见性传感器添加scrollDelay，如下所示：

  <VisibilitySensor onChange={onChange} scrollDelay={300}>

只滚动一次的解决方案来自这个线程： https://stackoverflow.com/a/58488868

您知道是否可以做一些事情来使仅在滚动时发生一次的动画更加流畅（主要是变换）？

【问题讨论】：

标签： reactjs react-hooks use-effect react-spring

【解决方案1】：

我认为问题在于，动画无法正常工作。它只是在没有动画的情况下将不透明度从 0 切换到 1。我将它更改为基于钩子的动画并且它只是工作（仅当 useSpring 位于 FadeInDirection 组件之外时）。所以最初的问题是，FadeInDirection 定义在 FadeInContainer 内部，它没有自己的属性。每次渲染都会重新定义它。

将FadeInDirection 创建为单独的组件。

我也去掉了useEffect，我只在VisibilitySensoronChange返回true时设置可见。

import React, { useState } from "react";
import { useSpring, animated } from "react-spring";
import VisibilitySensor from "react-visibility-sensor";

const FadeInDirection = ({ isVisible, children }) => {
  const props = useSpring({
    opacity: isVisible ? 1 : 0,
    transform: isVisible ? "translateY(0px)" : "translateY(50px)"
  });
  return <animated.div style={props}>{children}</animated.div>;
};

export const FadeInContainer = ({ children }) => {
  const [isVisible, setVisibility] = useState(false);

  const onChange = visiblity => {
    visiblity && setVisibility(visiblity);
  };

  return (
    <VisibilitySensor onChange={onChange}>
      <FadeInDirection isVisible={isVisible}>{children}</FadeInDirection>
    </VisibilitySensor>
  );
};

这里是一个例子：https://codesandbox.io/s/magical-sun-oqv0v?file=/src/App.js:184-787

【讨论】：