React CSS过渡无法正常工作 [英] React css transition does not work correctly

问题描述

我已经使用CSS过渡编写了一个React应用。但是这些过渡在某些组件中无法正常工作。在我的应用中，只有向上移动的组件才能正常工作，向下移动无需动画即可立即移动。 （我希望它们都随着动画一起移动。）

I've written a React app, using CSS transitions. But those transitions does not work correctly in some of the components. In my app, only the components who are moving upwards works well, those who are moving downwards moves instantly without animation. (I want them both moves with animation.)

这里是我在此处使用的CSS：

Here is the CSS I used there:

div.canvas {
    position: absolute;
    top: 90px;
    left: 60px;
    width: 640px;
    height: 480px;
    border: 1px solid #999;
    background: white;

}

div.canvas-rect {
    position: relative;
    margin-left: 20px;
    margin-top: 10px;
    height: 20px;
    background: green;

    transition: all 1s linear;
    -moz-transition: all 1s linear; /* Firefox 4 */
    -webkit-transition: all 1s linear; /* Safari 和 Chrome */
    -o-transition: all 1s linear; /* Opera */

}

---

已更新：

---

UPDATED:

我还构建了 codepen.io项目来显示问题。它具有此演示项目的完整代码。

I also built a codepen.io project to show the problem. It has the complete code of this demo project.

我尝试将日志条目添加到 componentDidUpdate ， componentDidMount 和 componentWillUnmount 方法显示这些组件是重新创建还是更新，表明它们都已更新（

I've tried to add a log entry to componentDidUpdate, componentDidMount and componentWillUnmount methods to show whether these component are re-created or updated, it shows that they are all updated (not re-created, or removed) every second.

推荐答案

好吧，在我开始赏金之后，因为我也遇到了这个问题，终于找到了问题所在。

Well, after I started a bounty because I also have this problem I finally found what seems to be the problem.

当您使用绝对位置（或相对情况，如您的情况）时，如果每次都重新渲染整个列表，React将对DOM中的元素进行重新排序（如您所说，这些元素不会被重新创建，只是被更新）。但这会带来过渡问题...显然，如果在过渡运行时移动元素，则最终会剪切动画。

When you are using absolute position (or relative, as in your case), if you re-render the whole list every time, React will re-order the elements in the DOM (as you said, the elements are not being recreated, just updated). But this creates the problem with the transitions... apparently, if you move an element while the transition is running then you end up cutting the animation.

因此，在某些情况下在这种情况下，您想使用绝对位置，关键概念是渲染一次元素的容器（在本例中为div），并且仅根据新顺序更改内部内容。如果需要添加更多元素，只需在末尾添加它们即可。

So, for cases in which you want to use position absolute, the key concept is to render the containers of your elements once (in this case, just divs) and only change the inner contents based on the new order. If you need to add more elements, just add them at the end.

我修改了代码笔，使其能够反映我的意思。我的示例非常笨拙，因为我刚刚创建了4个临时div，但它说明了这个想法：创建所需数量的容器，但不要使用每次都会重新创建它们的映射，否则过渡将被删除。

I modified your codepen so that it reflects what I am saying. My example is very dumb because I just created 4 ad-hoc divs, but it illustrates the idea: create as many containers as you need, but DO NOT use a map that recreates them every time, or your transitions will be cut.

https://codepen.io/ damianmr / pen / boEmmy？editors = 0110

const ArrList = ({
  arr
}) => {
  return (
    <div style={{position: 'relative'}}>
      <div className={`element element-${arr[0]} index-${arr[0]}`}>{arr[0]}</div>
      <div className={`element element-${arr[1]} index-${arr[1]}`}>{arr[1]}</div>  
      <div className={`element element-${arr[2]} index-${arr[2]}`}>{arr[2]}</div>  
      <div className={`element element-${arr[3]} index-${arr[3]}`}>{arr[3]}</div>  
    </div>
  );
}

因此，问题基本上是如何创建容器的静态列表以及如何您遍历该列表，以便第一个容器呈现数据的第一个元素，第二个容器呈现第二个元素，依此类推。

So, the problem is basically how you create a static list of containers and how you iterate through that list so that the first container renders the first element of your data, the second container the second element, etc.

希望对您有所帮助，这个问题是我也快疯了：）

Hope that it helps, this problem was driving me crazy too! :)

这篇关于React CSS过渡无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！