使用 React-Spring useSprings only on active button in array

Question

我正在尝试为活动框的位置变化设置动画。当用户单击该框时，我希望该框为顶部边距更改设置动画，而其余框保持在 0px。当用户更改活动框时，先前的活动框将return变为0px，新的活动框将获得50px的margin-top。

我想我快到了，但我还没有完全让它开始工作。如果有人能帮助我了解我做错了什么，我将不胜感激。

import { useSpring, useSprings, animated } from "react-spring";
import styled from "styled-components";

const Nav = () => {

  // Set Active Box
 const [activeBox, setActiveBox] = useState(0);

  const handleClick = (index) => {
    setActiveBox(index);
  };

// Boxes
  const boxes = [box1, box2, box3, box4];


// useSprings 
  const springs = useSprings(
    boxes.length,
    boxes.map((box, index) => ({
      marginTop: activeBox === index ? 50 : 0,
    }))
  );

  return (
    <NavContainer>
      {springs.map((prop, index) => (
        <StyledBox
          style={prop}
          key={index}
          onClick={() => handleClick(index)}
          currentActiveBox={activeBox === index}
        >
          <img src={boxes[index]} alt="" />
        </StyledBox>
      ))}
    </NavContainer>
  );
};

export default Nav;

const NavContainer = styled.div`
  position: absolute;
  bottom: 0;
  width: 200px;
  height: 75px;
`;

const StyledBox = styled.div`
  width: 25px;
  height: 25px;

  img {
    width: 100%;
    height: 100%;
  }

`;

谢谢！

Answer 1

问题是动画没有添加到样式组件！

const StyledBox = styled(animated.div)`
  width: 25px;
  height: 25px;

  img {
    width: 100%;
    height: 100%;
  }

使用 React-Spring useSprings only on active button in array

Using React-Spring useSprings only on active button in array

javascript

reactjs

react-spring