React-Spring fade 2 кнопки при наведении на коробку

У меня есть коробка с двумя кнопками, сложенными в центре. Когда я наводю курсор на поле, я хочу, чтобы кнопки меняли непрозрачность от 0 до 1, и я хочу перевести свойство transform с translateY (20px) на translateY (0), чтобы они также двигались вверх. У меня есть этот эффект, но я хочу, чтобы анимация нижней кнопки немного задерживалась при наведении курсора, и я хочу, чтобы анимация верхней кнопки слегка задерживалась при снятии курсора. Как я могу добиться этого с помощью react-spring?

Вот что у меня есть

  const [isHovering, setIsHovering] = useState(false);
  const fadeStyles = useSpring({
    from: { opacity: 0, transform: `translateY(20px)` },
    to: {
      opacity: isHovering ? 1 : 0,
      transform: isHovering ? `translateY(0px)` : `translateY(20px)`,
    },
  });

  return (
    <div>
      <animated.div style={fadeStyles}>
        <Button>Change</Button>
      </animated.div>

      <animated.div style={fadeStyles}>
        <Button>Details</Button>
      </animated.div>
    </div>

  )

reactjs javascript animation react-spring
person Ian Springer    schedule 13.10.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Это немного сложный вопрос. На первый взгляд кажется, что вы не можете реализовать это с помощью одной функции useSpring из-за разной задержки. Вы можете попробовать использовать useTrail, но этот след не так легко повернуть вспять. Так что useSprings остается.

Свойство задержки является ключевым. Вы должны использовать его с параметром функции, поэтому вы можете изменить задержку в зависимости от индекса кнопки и состояния наведения. Я закончил с этим, он немного более общий, он создает 4 анимированных div:

  const count = 4;
  const [springs, setSprings] = useSprings(count, (i) => ({
    opacity: 0.2,
    transform: `translateY(20px)`
  }));

  const onHover = (isHover) => {
    setSprings((i) => ({
      opacity: isHover ? 1 : 0.2,
      transform: isHover ? `translateY(0px)` : `translateY(20px)`,
      delay: isHover ? i * 100 : (count - 1 - i) * 100
    }));
  };

Часть рендеринга:

  {springs.map((props, index) => (
    <animated.div key={index} style={props}>
      button
    </animated.div>
  ))}

рабочий пример: https://codesandbox.io/s/reversed-delay-animation-on-hover-v1phc

person Peter Ambruzs    schedule 14.10.2020

arrow_upward
0
arrow_downward

Вы можете использовать свойство delay, чтобы указать время в мс для задержки анимации:

Итак, в вашем случае задержка на 80 мс:

const fadeStyles = useSpring({
    delay: 80,
    from: { opacity: 0, transform: `translateY(20px)` },
    to: {
    opacity: isHovering ? 1 : 0,
    transform: isHovering ? `translateY(0px)` : `translateY(20px)`,
    },

});

Дополнительную информацию см. В API.

person Silvia O'Dwyer    schedule 14.10.2020