Блог

У меня возникла некоторая проблема с анимацией моего компонента индикатора выполнения … Я пытаюсь анимировать свой компонент (заполняя ширину компонента индикатора выполнения от 0% до X% пружиной, когда она видна на экране (с помощью 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 :

Проблема с этим подходом: начальная анимация работает, но когда компонент переходит от видимого к невидимому, анимация 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>
)
}
  

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

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

В вашей второй попытке я полагаю, что это из-за смешивания render prop API для VisibilitySensor и hooks API для react-spring и состояния, когда 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>
  );
}