React css转换无法正常工作

Question

我使用CSS转换编写了一个React应用程序.但是这些转换在某些组件中无法正常工作.在我的应用程序中,只有向上移动的组件才能正常运行,向下移动的组件会在没有动画的情况下立即移动.(我希望它们都带动画.)

这是我在那里使用的CSS:

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 */

}

---

更新:

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

我试图添加一个日志条目componentDidUpdate,componentDidMount以及componentWillUnmount显示是否重新创建或更新这些组件的方法,它表明它们每秒都更新(不重新创建或删除).

Answer 1

好吧,在我开始赏金之后,因为我也有这个问题,我终于找到了似乎是什么问题.

当你使用绝对位置(或相对的,如你的情况),如果你每次重新渲染整个列表,React将重新排序DOM中的元素(正如你所说,元素没有被重新创建,只是更新).但这会产生转换的问题......显然,如果在转换运行时移动元素,那么最终会切割动画.

因此,对于要使用绝对位置的情况,关键概念是将元素的容器呈现一次(在这种情况下,只是div)并且仅基于新顺序更改内部内容.如果您需要添加更多元素,请在最后添加它们.

我修改了你的codepen,以便反映我所说的内容.我的例子非常愚蠢,因为我刚刚创建了4个ad-hoc div,但它说明了这个想法:根据需要创建尽可能多的容器,但不要使用每次都重新创建它们的地图,否则你的过渡将会被切断.

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>
  );
}

因此,问题基本上是如何创建静态容器列表以及如何遍历该列表,以便第一个容器呈现数据的第一个元素,第二个容器呈现第二个元素,等等.

希望它有所帮助,这个问题也让我发疯了!:)

Answer 2

我知道事实并非如此，但因为我来到这里也是在寻找React css transition does not work correctly，所以我只想分享：

如果您在 内部使用箭头函数创建一个元素render，它不会得到正确的动画效果，因为总是会创建一个新的组件。您应该在外部创建一个函数并在“渲染”中调用它。

Answer 3

index你可以通过使用as 键来欺骗 React 。如果您考虑el和index作为起始位置 (index) 和结束位置 (el)，则该元素在转换结束时已移动到旧的结束位置，并且当它到达那里时，它就会被接管通过新的起始位置，并且（索引）被切换以匹配新的设置。这是因为当你key在 React 中设置一个元素时，虚拟 DOM 将始终将其解释为同一个元素。因此，一般来说，将索引设置为“id”是正确的。

\n\n

我仅通过切换index/el（并将元素位置设置为绝对位置）来制作一个工作示例。

\n\n

\r\n

\r\n

const {combineReducers, createStore} = Redux;\r\nconst { Provider, connect } = ReactRedux;\r\n\r\nconst ArrList = ({\r\n  arr\r\n}) => (\r\n  <div>{\r\n  arr.map((el, index)=>\r\n          <div\r\n            key={""+index}\r\n            className={`element element-${el}` + ` index-${el}`}\r\n            >\r\n            {el}\r\n          </div>) }\r\n  </div>\r\n)\r\n      \r\nconst mapStateToArrList = (state) => {\r\n  return {\r\n    arr: state.appReducer.arr\r\n  }\r\n};\r\n\r\nconst App = connect(mapStateToArrList, null)(ArrList);\r\n\r\nconst initialState = {\r\n  arr: [1, 2, 3, 4]\r\n}\r\n\r\nconst appReducer = (state = initialState, action) => {\r\n  switch(action.type) {\r\n    case "tick":\r\n      return {\r\n        ...state,\r\n        arr: _.shuffle(state.arr)\r\n      }\r\n    default:\r\n      return state\r\n   }\r\n}\r\n\r\nconst reducer = combineReducers({\r\n  appReducer\r\n})\r\n\r\n\r\nconst store = createStore(reducer)\r\n\r\nReactDOM.render(\r\n  <Provider store={store}>\r\n    <App />\r\n  </Provider>,\r\n  document.getElementById(\'root\')\r\n)\r\n\r\nconst dispatcher = () => {\r\n  store.dispatch({\r\n     type: "tick"\r\n  })\r\n  setTimeout(dispatcher, 1000)\r\n}\r\n\r\ndispatcher()

\r\n

.element {\r\n    position: absolute;\r\n    height: 20px;\r\n    background: green;\r\n    margin-left: 20px;\r\n    margin-top: 20px;\r\n\r\n    text-align: right;\r\n    color: white;\r\n    line-height: 20px;\r\n\r\n    transition: all 1s ease-in;\r\n    -moz-transition: all 1s ease-in; /* Firefox 4 */\r\n    -webkit-transition: all 1s ease-in; /* Safari \xe5\x92\x8c Chrome */\r\n    -o-transition: all 1s ease-in; /* Opera */\r\n\r\n}\r\n\r\n.element-1 {\r\n    width: 20px;\r\n}\r\n\r\n.element-2 {\r\n    width: 40px;\r\n}\r\n\r\n.element-3 {\r\n    width: 60px;\r\n}\r\n\r\n.element-4 {\r\n    width: 80px;\r\n}\r\n\r\n.index-1 {\r\n  top: 20px;\r\n}\r\n\r\n.index-2 {\r\n  top: 40px;\r\n}\r\n\r\n.index-3 {\r\n  top: 60px;\r\n}\r\n\r\n.index-4 {\r\n  top: 80px;\r\n}

\r\n

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>\r\n<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>\r\n<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>\r\n<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.js"></script>\r\n<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.6/react-redux.js"></script>\r\n\r\n<div id="root"></div>

\r\n

\r\n

\r\n

\n