以下是书面解释:https://jsfiddle.net/santiagopuentep/vvpezbp9/2/两个 React 元素(item0 和 item1)在 css 中使用 transform: translate(); 定位,并使用 css 转换 激活该转换.Here is a written explanation:该应用使用布局呈现项目列表.Two React elements (item0 and item1) positioned with transform: translate(); in css and with a css transition active for that transform.第一个布局是:item0 在 translate(0px,0px); 和 item1 在 translate(0px,50px);.The app renders a list of items using a layout.具有相同项目但位置翻转的第二个布局:item0 在 translate(0px,50px); 和 item1 在 translate(0px,0px);.The first layout is:item0 at translate(0px,0px); and item1 at translate(0px,50px);.点击这两个项目中的任何一个都会前后改变两个项目的布局,交换它们的位置,从而触发 css 转换以改变位置.>这很好用很好,转换正确触发.The second layout with the same items but with positions flipped:item0 at translate(0px,50px); and item1 at translate(0px,0px);.问题,如果第二个布局使 item1 在 item0 之后渲染(仅渲染顺序发生变化,css 翻译位置仍然交换),过渡为第二个元素丢失.Clicking on any of the two items changed the layout back and forth from the two, swapping their positions and thus triggering the css transition for the position change.这看起来像是 React 正在删除元素而不是仅仅重新排序它,即使我设置了键.This works just fine, the transitions trigger correctly.请帮忙!推荐答案非常感谢!我确认了这个问题,所以解决方法是:Please help! 解决方案{cards.map(card => <Card key={card.id} {...card}/>)}Thank you very much! I confirm this issue, so workaround is:} 这篇关于如果元素顺序发生变化,React 会丢失 CSS 过渡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!