React-spring, как вы можете использовать width% в объекте Spring? - PullRequest
Новая
       24

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

1 голос
/ 03 апреля 2019

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

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

Попытка № 1: -Проблема с таким подходом: я получаю сообщение об ошибке «Интерполяция не определена» (вероятно, из-за width: 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>
)
}

Заранее благодарю за помощь!

1 Ответ

0 голосов
/ 15 мая 2019

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

Во второй попытке я полагаю, что это из-за смешивания 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>
  );
}
...