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

这是一个有点棘手的问题。乍一看，您似乎无法使用单个 useSpring 函数实现它，因为不同的延迟。您可以尝试使用 useTrail，但轨迹不容易逆转。所以 useSprings 仍然存在。delay 属性是关键。您必须将它与函数参数一起使用，这样您就可以根据按钮的索引和悬停状态更改延迟。我最终得到了这个，它创建了 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>  ))}

Answer 2

您可以使用该delay属性指定以毫秒为单位的时间长度，以通过以下方式延迟动画：所以在你的情况下，延迟 80ms：const fadeStyles = useSpring({    delay: 80,    from: { opacity: 0, transform: `translateY(20px)` },    to: {    opacity: isHovering ? 1 : 0,    transform: isHovering ? `translateY(0px)` : `translateY(20px)`,    },});