css - 在渲染和状态改变时 react 动画组件

对于动画，我编写这样的代码，但是此代码对我不起作用。想知道这是一个CSS问题，或者我的代码样式需要更新。或如何在组件上制作动画

render: function() {
  var len = Object.keys(Interfaces.previewContainer.state.sourceImg).length;

  var imgContainer = [];
  for (var i = 0; i < len; i++) {
    imgContainer.push(React.createElement(PreviewImgContainer, {
      key: i,
      flipParentClass: this.state.flipParentClass,
      i_d: 'SelectedTemplate_' + i,
      dataactionstring: 'selecttemplatetype-' + this.state.dataactionstring['src' + i],
      sourceImg: this.state.sourceImg['src' + i],
      ref: 'PreviewImgContainer',
      alter: this.state.alter
    }));

  }
  return (
    React.createElement(
      ReactCSSTransitionGroup, {
        className:'flipParent',
        transitionEnterTimeout: 250,
        transitionLeaveTimeout: 250,
        transitionName: 'flipped' // 'flipParent flipped' is a class name
      },
      React.createElement('div', {
        className: 'previewContainer',
        style: {
          marginLeft: this.state.marginLeft
        },
        ref: 'previewContainer'
      }, imgContainer)
    )
  );
}

请让我知道我在哪里出错或必须在哪里更新代码

.flipParent {
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s ease 0s;
  width: 100%;
}
/* .flipped is for flipping (x-axis) the element */

.flipped {
  transform: rotateY(180deg);
}

最佳答案

也许您必须实施这些

.flipped-enter

.flipped-enter.flipped-enter-active

.flip-leave

.flipped-leave.flipped-leave-active

以下屏幕截图来自the official react guide