React-Spring 没有动画

Question

所以我正在尝试使用背景图像和一些文本为容器设置动画。我已将持续时间和不透明度 0 的配置设置为不透明度 1，但组件加载正常。我确实将组件作为私有路由的一部分。它是登录后显示的页面。

              to= {{opacity:1, marginTop:0 }}
              config = {{delay:4000, duration:4000}}>
        {(props) => (

            
          <div style={props}>
             <div style={{ backgroundImage: `url(${cancer})`}} className="container-img"> 
              <h2> What is Cancer?</h2>

              <p className="paragraph">
                The dogmatic view of cancer has been around for a long time.
                This view is called the Somatic Mutation Theory. This Theory is
                believed that cancer arises from damaged DNA in the cells that
                causes out of ccontrol growth.
              </p>
              <p className="paragraph">
                New Evidence shows that Cancer is caused by the damage to the
                mitochondria causing the cells to fall back on ancient pathways
                of fermentation. Cancer cells ferment Glucose and/or Glutamine
                for energy or ATP.
              </p>

              <p className="paragraph">
                If Cancer is a genetic disease, then why when they did a
                scientic experiment in the 1960's where they took the
                mitochondria of a cancer cell and put it in a normal cell the
                cell turned cancerous. This theory is called the Metabolic
                Theory of Cancer.
              </p>
            </div>
           </div> 
        )}
      </Spring>
    </>
  );
};

Answer 1

您将 SpringValues 传递给常规 dom 元素：

<div style={props}>

您想要做的是将它们传递给animated 元素：

// import { animated } from 'react-spring'

<animated.div style={props}>

如docs中所述