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

              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的animation.div没有设置相同的动画。正确的方法是什么？有没有办法在没有反应弹簧的情况下对其进行动画处理？

2）我有一个基于标志的条件引导类名。我要设置动画

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

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