React-Spring 在框悬停时淡化 2 个按钮

Question

我有一个盒子，中间有两个按钮。当我将鼠标悬停在框上时，我希望按钮将不透明度从 0 过渡到 1，并且我希望将变换属性从 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>

  )

Answer 1

您可以使用 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 for more information。

Answer 2

这是一个有点棘手的问题。乍一看，您似乎无法使用单个 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

React-Spring 在框悬停时淡化 2 个按钮

React-Spring fade 2 buttons on box hover

javascript

animation

reactjs

react-spring