Javascript 如何在每次单击元素时使转换生效

我试图使用React-Spring库中的“UseTransfort”和“animated”，但出现了一个问题，即它只在第一次设置动画，也没有激活leave

通过深入研究，我认为这与关键点没有更新有关，我认为这是使新动画能够渲染的原因，但除了刷新页面，我不知道如何更新关键点

function App() {
  const [showApplicants, setShowApplicants] = useState(false);
  const [showSpecificApplicant, setShowSpecificApplicant] = useState([]);
  const [applicants, setApplicants] = useState([
    {
      firstName: "Billy",
      background: "Employed",
      id: 1
    },
    {
      firstName: "Sarah",
      background: "Employed",
      id: 2
    },
    {
      firstName: "Vera",
      background: "Student",
      id: 3
    },
    {
      firstName: "Albert",
      background: "Unemployed",
      id: 4
    }
  ]);

  const transitions = useTransition(applicants, item => item.id, {
    from: {
      transform: "translate(-100%, 0)"
    },
    enter: {
      transform: "translate(0%,0)"
    },
    leave: {
      transform: "translate(150%, 0)"
    },
    config: { duration: 3000 }
  });

  const handleApplicants = () => {
    setShowApplicants(!showApplicants);
    setShowSpecificApplicant([]);
  };

  const showDetails = (e, item) => {
    setShowSpecificApplicant(item.id);
  };

  const SpecificApplicant = () => {
    const matchedUser = applicants.find(
      user => user.id === showSpecificApplicant
    );
    return transitions.map(({ item, key, props }) => {
      return showSpecificApplicant === item.id ? (
        <animated.div key={key} style={props}>
          <div
            style={{
              background: "lightblue",
              width: "20%",
              margin: "0 auto",
              textAlign: "center",
              borderRadius: "5px",
              padding: "10px",
              display: "flex",
              flexDirection: "column"
            }}
          >
            <h3 style={{ margin: "0", padding: "0" }}>
              {matchedUser.firstName}
            </h3>
            <p> Current Status: {matchedUser.background}</p>
          </div>
        </animated.div>
      ) : null;
    });
  };

  return (
    <div className="App">
      <h1>Hello</h1>
      <button onClick={handleApplicants}> Show Applicants </button>
      <ul>
        {showApplicants &&
          applicants.map(item => (
            <button onClick={e => showDetails(e, item)}>
              {item.firstName}
            </button>
          ))}
      </ul>
      <SpecificApplicant />
    </div>
  );
}

函数应用程序（）{
const[showAppenders，setshowAppenders]=useState（false）；
const[showSpecificAppender，setshowSpecificAppender]=useState（[]）；
const[applicators，setapplicators]=useState([
{
名字：“比利”，
背景：“就业”，
身份证号码：1
},
{
名字：“莎拉”，
背景：“就业”，
身份证号码：2
},
{
名字：“维拉”，
背景：“学生”，
身份证号码：3
},
{
名字：“阿尔伯特”，
背景：“失业”，
身份证号码：4
}
]);
const transitions=useTransition（申请人，item=>item.id{
发件人：{
转换：“转换（-100%，0）”
},
输入：{
转换：“转换（0%，0）”
},
离开：{
转换：“转换（150%，0）”
},
配置：{持续时间：3000}
});
常量handleApplicants=（）=>{
设置展示申请者（！展示申请者）；
设置具体申请人（[]）；
};
const showDetails=（e，项）=>{
SetShowSpecific申请人（项目id）；
};
const specific申请人=（）=>{
const matchedUser=applicators.find(
user=>user.id==showSpecificAppender
);
返回transitions.map（{item，key，props}）=>{
return showSpecific申请人===item.id(
{matchedUser.firstName}
当前状态：{matchedUser.background}

)：null；
});
};
返回(
你好
展示申请人

{显示申请者&&
申请人。地图（项目=>(
显示详细信息（e，项目）}>
{item.firstName}
))}

);
}

---

我希望每次单击申请者时都会触发一个动画，但它只会第一次启动动画。在那之后，他们只是正常出现。谁能告诉我我做错了什么。

转换必须处理数组的更改。因此，在useTransition中将申请者数组更改为ShowSpecificAppender数组。这样，它将为新阵列元素应用enter动画，并为从阵列中删除的元素应用LEVE动画

import React，{useState}来自“React”；
从“react dom”导入react dom；
从“react spring”导入{useTransition，动画}；
导入“./styles.css”；
函数App（）{
const[showAppenders，setshowAppenders]=useState（false）；
const[showSpecificAppender，setshowSpecificAppender]=useState（[]）；
const[applicators，setapplicators]=useState([
{
名字：“比利”，
背景：“就业”，
身份证号码：1
},
{
名字：“莎拉”，
背景：“就业”，
身份证号码：2
},
{
名字：“维拉”，
背景：“学生”，
身份证号码：3
},
{
名字：“阿尔伯特”，
背景：“失业”，
身份证号码：4
}
]);
const transitions=useTransition（showSpecificAppender，item=>item.id{
发件人：{
转换：'translate（-100%，0）'
},
输入：{
转换：“转换（0%，0）”
},
离开：{
转换：“转换（150%，0）”
}
});
常量handleApplicants=（）=>{
设置展示申请者（！展示申请者）；
设置具体申请人（[]）；
};
const showDetails=（e，项）=>{
设置具体申请人（[项目]）；
};
const specific申请人=（）=>{
返回transitions.map（{item:matchedUser，key，props}）=>{
返回(

现在，您可能希望在转换期间将申请者的样式更改为在同一行中。如果您将
位置：“绝对”
添加到from对象，那么您就走上了正确的轨道。
转换必须处理数组的更改。因此，将申请者数组更改为useTransition中的ShowSpecificAppender数组。这样，它将将为新阵列元素应用enter动画，并为从阵列中删除的元素应用LEVE动画

import React，{useState}来自“React”；
从“react dom”导入react dom；
从“react spring”导入{useTransition，动画}；
导入“./styles.css”；
函数App（）{
const[showAppenders，setshowAppenders]=useState（false）；
const[showSpecificAppender，setshowSpecificAppender]=useState（[]）；
const[applicators，setapplicators]=useState([
{
名字：“比利”，
背景：“就业”，
身份证号码：1
},
{
名字：“莎拉”，
背景：“就业”，
身份证号码：2
},
{
名字：“维拉”，
背景：“学生”，
身份证号码：3
},
{
名字：“阿尔伯特”，
背景：“失业”，
身份证号码：4
}
]);
const transitions=useTransition（showSpecificAppender，item=>item.id{
发件人：{
转换：'translate（-100%，0）'
},
输入：{
转换：“转换（0%，0）”
},
离开：{
转换：“转换（150%，0）”
}
});
常量handleApplicants=（）=>{
设置展示申请者（！展示申请者）；
设置具体申请人（[]）；
};
const showDetails=（e，项）=>{
设置具体申请人（[项目]）；
};
const specific申请人=（）=>{
返回transitions.map（{item:matchedUser，key，props}）=>{
返回(

现在，您可能希望在过渡期间将申请者的样式更改为在同一行中。如果您将
位置：“绝对”
添加到from对象，那么您就走上了正确的轨道。
非常好。谢谢，这真的很有帮助！非常好。谢谢，这真的很有帮助！