如果元素顺序发生变化，React 会丢失 CSS 过渡 [英] React loses CSS transition if element ordering changes

问题描述

React 键 不起作用.

React keys are not working.

如果我交换两个用 transform transform: translate(); 定位的 react 元素(item0 和 item1)的位置，一个 css 转换仅当元素以相同的顺序呈现时才会触发.

If I swap the position of two react elements (item0 and item1) positioned with transform transform: translate(); a css transition is triggered, only if the elements were rendered in the same order.

如果我更改渲染顺序(位置交换仍然相同，但现在 item0 在 之后 item1 渲染)，css 转换将不触发.

If I change the order of the render (position swap still the same but now item0 renders after item1), the css transition is not triggered.

看起来 React 正在删除 DOM 元素并重新创建它，即使他们设置了 React 键.

It looks like react is deleting the DOM element and recreating it, even if they have React keys set.

这是一个简单的 JSfiddle 问题.

Here is a simple JSfiddle with the problem.

https://jsfiddle.net/santiagopuentep/vvpezbp9/2/

以下是书面解释:

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 过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！