javascript - 当组件在 View 中时在 react-spring 中启动动画

Question

我正在使用 react-spring 制作动画，所有动画在页面加载后开始。我想控制动画的开始。期望的结果是让屏幕下方的组件在它们出现在 View 中时启动动画(即用户向下滚动)。代码如下:

const cols = [
/*Components here that will be animated ..*/
{component: <div><p>A<p></div> , key:1},
{component: <div><p>B<p></div> , key:2},
{component: <div><p>C<p></div> , key:3},

]

export default function foocomponent(){
  const [items, setItems] = React.useState(cols);
  const [appear, setAppear] = React.useState(false); // Should trigger when the component is in view

  const transitions = useTransition(items, (item) => item.key, {
    from: { opacity: 0, transform: 'translateY(70px) scale(0.5)', borderRadius: '0px' },
    enter: { opacity: 1, transform: 'translateY(0px) scale(1)', borderRadius: '20px', border: '1px solid #00b8d8' },
    // leave: { opacity: 1, },
    delay: 200,
    config: config.molasses,
  })


  React.useEffect(() => {
    if (items.length === 0) {
      setTimeout(() => {
        setItems(cols)
      }, 2000)
    }
  }, [cols]);

  return (
        <Container>
          <Row>
            {appear && transitions.map(({ item, props, key }) => (
              <Col className="feature-item">
                <animated.div key={key} style={props} >
                  {item.component}
                </animated.div>
              </Col>
            ))}
          </Row>
        </Container>
  );
}

我尝试使用 appear && transitions.map(...) 但不幸的是，这不起作用。知道我应该如何根据条件控制动画的开始吗？

Answer 1

我使用 https://github.com/civiccc/react-waypoint对于这类问题。

如果您将此隐藏组件放置在动画之前。您可以使用它切换出现状态。像这样:

<Waypoint
  onEnter={() => setAppear(true) }
/>

您甚至可以用它指定一个偏移量。微调体验。