React-spring, как вы можете использовать ширину% в объекте Spring?

У меня есть проблема с анимацией моего компонента индикатора выполнения... Я пытаюсь анимировать свой компонент (путем заполнения ширины компонента индикатора выполнения от 0% до X% с помощью Spring, когда он виден на экране (с помощью VisibilitySensor). Я до сих пор пробовал несколько вещей, и я еще не понял, как это сделать правильно PS: в настоящее время я новичок в React.

Вот что я пробовал до сих пор:

Попытка № 1: -Проблема с этим подходом: я получаю сообщение об ошибке «Интерполяция не определена» (вероятно, из-за ширины: isVisible? ${props.percent}%: '0%' в 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>
)
}

Заранее спасибо за вашу помощь !


reactjs react-spring
person GBab    schedule 02.04.2019    source источник
comment
Я добавил код на codeandbox, чтобы вы могли видеть, чего я пытаюсь достичь. Это вроде как работает, но мне нужна ширина в%, а не в px... Посмотрите: codesandbox.io/s/ 88ok0rqw2l   -  person GBab    schedule 03.04.2019

Ответы (1)


arrow_upward
1
arrow_downward

В вашей первой попытке ему определенно не нравится интерполяция между строковыми значениями, это может быть связано с более старым API реквизитов рендеринга для react-spring, но я, честно говоря, не слишком уверен в объяснении там.

Во второй попытке я полагаю, что это из-за смешивания API поддержки рендеринга для VisibilitySensor и 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>
  );
}
person sanjsanj    schedule 15.05.2019