reactjs - React-spring 如何在 Spring 对象中使用宽度 %？

Question

我在为我的进度条组件设置动画时遇到一些问题...我正在尝试为我的组件设置动画(通过在屏幕上可见时用 Spring 填充进度条组件宽度从 0% 到 X%(通过使用 VisibilitySensor )。到目前为止，我已经尝试了一些事情，但我还没有弄清楚如何正确地做到这一点。PS:我目前是 React 的新手。

这是我到目前为止尝试过的:

尝试#1:- 这种方法的问题:我收到一条错误消息，提示“未定义插值”(可能是因为 width: isVisible ? ${props.percent}% : '0%' in the Spring)也许有解决方法？

function SkillProgress(props) {
    return (
        <VisibilitySensor>
            {({ isVisible }) => (
                <Spring delay={300} to={{ opacity: isVisible ? 1 : 0, width: isVisible ? `${props.percent}%` : '0%'}}>
                    {animation =>
                        <div>
                            <div>{props.icon}{props.skillname}</div>
                            <div className={"progressbar"}>
                                <div className={"progressbarprg"} style={animation}><span
                                    className={"skillLevel"}>{props.level}</span></div>
                            </div>
                        </div>
                    }
                </Spring>
            )}
        </VisibilitySensor>
    )
}

尝试#2:

这种方法的问题:初始动画有效，但当组件从可见变为不可见时， Spring 动画不起作用，它直接从 0% 变为 X%。

function SkillProgress(props) {
const spring = useSpring({from: {width: '0%'}, width: ${props.percent}%, config: config.molasses, delay: 300});
const spring2 = useSpring({from: {width: ${props.percent}%}, width: '0%', config: config.molasses, delay: 300});

return (
    <VisibilitySensor>
        {({ isVisible }) => (
            <div>
                <div>{props.icon}{props.skillname}</div>
                <div className={"progressbar"}>
                    <animated.div className={"progressbarprg"} style={isVisible ? spring : spring2}><span
                        className={"skillLevel"}>{props.level}</span></animated.div>
                </div>
            </div>
        )}
    </VisibilitySensor>
)
}

预先感谢您的帮助!

Answer 1

在您的第一次尝试中，它肯定不喜欢在字符串值之间进行插值，这可能归因于 react-spring 的旧渲染 Prop API，但老实说我不太确定那里的解释。

在您的第二次尝试中，我认为这是因为混合了用于 VisibilitySensor 的渲染 Prop API 和用于 react-spring 的钩子(Hook) API，并且 isVisible 的状态未在任何地方捕获。

我试了一下，这是一个工作版本，我认为这正是您要找的 https://codesandbox.io/s/wnyx6vp348

function SkillProgress(props) {
  const [isInView, setIsInView] = React.useState(false);

  const onVisibilityChange = isInView => setIsInView(isInView);

  const progressSpringStyleProps = useSpring({
    width: isInView ? `${props.percent}%` : `0%`,
    config: config.molasses
  });

  return (
    <VisibilitySensor onChange={onVisibilityChange}>
      <div>
        <div>{props.skillname}</div>
        <div className={"progressbar"}>
          <animated.div
            className={"progressbarprg"}
            style={progressSpringStyleProps}
          />
        </div>
      </div>
    </VisibilitySensor>
  );
}