reactjs - 隐藏时如何使用react-spring为div制作动画？

Question

当点击按钮 {aa} 时，如何通过 react-spring 隐藏来为 div 制作动画？

https://codesandbox.io/s/silly-feistel-j1snp

  const props = useSpring({config: { duration: 1250 },opacity: 1, from: {opacity: 0}});
  const foo =() =>{
    setAa(!aa)
  }
  return (
    <div className="App">

      <div onClick={()=>foo()}>aa</div>
      <br/>
      {aa &&
      <animated.div  style={props}>I will fade in</animated.div>}   
    </div>````

Answer 1

您需要使用useTransition而不是useSpring：

  const transitions = useTransition(aa, null, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });

在渲染方法中：

  return (
    <div className="App">
      <div onClick={() => foo()}>aa</div>
      <br />
      {transitions.map(
        ({ item, key, props }) =>
          item && (
            <animated.div key={key} style={props}>
              I will fade in
            </animated.div>
          )
      )}
    </div>
  );

工作示例：https ://codesandbox.io/s/modest-pine-2dr7s

文档：https ://www.react-spring.io/docs/hooks/use-transition