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

【问题标题】：React-spring how can you use a width % in a Spring object?React-spring 如何在 Spring 对象中使用宽度 %？
【发布时间】：2019-05-15 16:43:55
【问题描述】：

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

这是我迄今为止尝试过的：

尝试 #1： -这种方法的问题：我收到一条错误消息，提示“未定义插值”（可能是因为宽度：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：

这种方法的问题：初始动画有效，但是当组件从可见变为不可见时，弹簧动画不起作用，它直接从 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>
)
}

提前感谢您的帮助！

【问题讨论】：

我在codesandbox上添加了代码，这样你们就可以看到我想要实现的目标。它有点工作，但我需要 % 而不是 px 的宽度......看看：codesandbox.io/s/88ok0rqw2l

标签： reactjs react-spring

【解决方案1】：

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

在您的第二次尝试中，我相信这是因为混合了 VisibilitySensor 的渲染道具 API 和 react-spring 的钩子 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>
  );
}

【讨论】：