1

我在为我的进度条组件设置动画时遇到了一些问题......我正在尝试为我的组件设置动画（通过在屏幕上可见时用 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>
)
}

预先感谢您的帮助 ！

4

1 回答 1

1

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

在您的第二次尝试中，我相信这是因为混合了VisibilitySensorreact-spring 的渲染道具 API 和钩子 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>
  );
}
于 2019-05-15T08:43:55.550 回答