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

Question

至于用 react-spring 隐藏以在单击按钮 {aa} 时为 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

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

how to make animation for div in react using react-spring when hiding?

reactjs

react-spring