Javascript React Spring-为渲染之间的元素设置动画

我想让我的头脑清醒过来。所以我有一些盒子，我需要通过一个活动索引来过滤，我的想法是为盒子渲染设置动画，但是我只有在组件第一次渲染时才有动画

这就是我到目前为止所做的：

import React from "react";
import ReactDOM from "react-dom";
import styled from "@emotion/styled";
import { useTransition, animated } from "react-spring";

import "./styles.css";

const Header = styled.div`
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
`;

const Content = styled.div`
  display: flex;
  justify-content: center;
`;

const Box = styled.div`
  width: 64px;
  height: 64px;
  background-color: yellow;
  border: 3px solid yellowgreen;
  color: yellowgreen;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
`;

const EnhancedBox = animated(Box);

const App = () => {
  const [activeBoxIndex, setActiveBoxIndex] = React.useState(0);
  const boxes = [
    { label: "1", key: 0 },
    { label: "2", key: 1 },
    { label: "3", key: 2 }
  ];

  const transition = useTransition(boxes, item => item.key, {
    from: { maxHeight: "0px", overflow: "hidden", margin: "0px 0px" },
    enter: { maxHeight: "100px", overflow: "hidden", margin: "5px 0px" },
    leave: { maxHeight: "0px", overflow: "hidden", margin: "0px 0px" }
  });

  const handleBoxClick = n => () => {
    setActiveBoxIndex(n);
  };

  return (
    <div className="App">
      <Header>
        <button onClick={handleBoxClick(0)}>Show box 1</button>
        <button onClick={handleBoxClick(1)}>Show box 2</button>
        <button onClick={handleBoxClick(2)}>Show box 3</button>
      </Header>
      <Content>
        {transition.map(({ item, props, key }) => {          
          return item.key === activeBoxIndex ? (
            <EnhancedBox key={item.key} style={props}>
              {item.label}
            </EnhancedBox>
          ) : (
            <></>
          );
        })}
      </Content>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
从“@emotion/styled”导入样式；
从“react spring”导入{useTransition，动画}；
导入“/styles.css”；
const Header=styled.div`
显示器：flex；
证明内容：中心；
边缘底部：16px；
`;
const Content=styled.div`
显示器：flex；
证明内容：中心；
`;
常量框=styled.div`
宽度：64px；
高度：64px；
背景颜色：黄色；
边框：3倍纯黄绿色；
颜色：黄绿色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
字号：2rem；
`;
const EnhancedBox=已设置动画（长方体）；
常量应用=（）=>{
const[activeBoxIndex，setActiveBoxIndex]=React.useState（0）；
常数框=[
{标签：“1”，键：0}，
{标签：“2”，键：1}，
{标签：“3”，键：2}
];
const transition=useTransition（框，item=>item.key{
发件人：{maxHeight:“0px”，溢出：“hidden”，边距：“0px 0px”}，
输入：{maxHeight:“100px”，溢出：“hidden”，边距：“5px0px”}，
左：{maxHeight:“0px”，溢出：“hidden”，边距：“0px 0px”}
});
const handleBoxClick=n=>（）=>{
setActiveBoxIndex（n）；
};
返回(
显示框1
显示框2
显示框3
{transition.map（{item，props，key}）=>{
return item.key==activeBoxIndex(
{item.label}
) : (
);
})}
);
};
const rootElement=document.getElementById（“根”）；
ReactDOM.render（
可能有更好的方法，但这里有一个简单的方法：

const boxes = [
  { label: "1", key: 0 },
  { label: "2", key: 1 },
  { label: "3", key: 2 }
];
//start with item 0 in the display boxes array
const displayBoxes = [];
displayBoxes.push(boxes[0]);

const transition = useTransition(displayBoxes, item => item.key, {
  from: { maxHeight: "0px", overflow: "hidden", margin: "0px 0px" },
  enter: { maxHeight: "100px", overflow: "hidden", margin: "5px 0px" },
  leave: { maxHeight: "0px", overflow: "hidden", margin: "0px 0px" }
});

const handleBoxClick = n => () => {
  //empty the array
  displayBoxes = [];
  //then push in the new item
  displayBoxes.push(boxes[n]);
};

UseTransformation的一个特性对于新手来说并不是很明显，那就是UseTransformation钩子的行为就像是你传递给它的数组的当前状态的观察者

为了达到您想要的效果，我将高度从0设置为自动，但这需要一种在px中获取高度的方法，并增加了一层复杂性。我喜欢在元素上设置高度，然后使用maxHeight控制其外观

希望有帮助。
我刚刚处理了一个类似的问题。您的动画都是同时渲染的，因为您正在为整个长方体阵列制作动画。您需要做的是在单击按钮时操纵阵列