如何在 React 中为条件元素设置动画

Question

我有一个 React 应用程序。我将 React Spring 用于整体动画。我无法为两件事制作动画 - 我正在试验的动画是一个简单的不透明动画。

              import { useSpring, animated } from "react-spring";

              /***
              Some code
              ***/

              const styleProps = useSpring({
                 to: { opacity: 1 },
                 from: { opacity: 0 }
              });

1) 是条件元素。请参考下面的代码-

              <section>
                {!flag ? (
                <animated.div style={styleProps}>
                  Some random text
                </animated.div>
              ) : (
                <animated.div style={styleProps}>
                  To appear with animation
                </animated.div>
              )
             }
             </section>

问题是 react-spring 的 animated.div 动画不一样。什么是正确的方法？有没有办法在没有 react-spring 的情况下制作相同的动画？

2) 我有一个基于标志的条件引导类名。我想制作相同的动画

            <animated.div style={styleProps} className={classnames({
                 "col-lg-6": !flag,
                 "col-lg-12": flag
            })}
            >
                Random Content
            </animated.div>

同样，问题在于它没有动画。什么是正确的方法？

Answer 1

你有很多问题。我可以回答一部分，也许你会更好地理解它。

您的 useSpring 动画示例仅触发一次。当您在带有条件渲染的组件之间切换时，它将不再动画。

但是你可以在useSpring中重新触发动画，如果你有条件地改变'to'参数（并将渲染留给react-spring）。

const styleProps1 = useSpring({
   to: { opacity: flag ? 1 : 0 },
   from: { opacity: 0 }
});

const styleProps2 = useSpring({
   to: { opacity: flag ? 0 : 1 },
   from: { opacity: 0 }
});

<section>
  <>
    <animated.div style={styleProps1}>
      Some random text
    </animated.div>

    <animated.div style={styleProps2}>
      To appear with animation
    </animated.div>
  </>
</section>

如果你想让元素出现在同一个地方，你必须使用绝对定位。

使用绝对定位也可以使用 useTranstion 实现类似的效果。在这种情况下，元素在动画结束时卸载。所以如果你在使用 useSpring 方法时遇到鼠标点击问题，你可以尝试切换到 useTransition。

也许它也回答了您的第二个问题。我不熟悉引导程序。