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)`,

    },

});