在渲染时及其状态发生变化时对动画组件进行反应

时间:2015-11-18 15:28:14

标签: css reactjs

对于动画我写这样的代码,但这段代码对我不起作用。很想知道这是一个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);
}

1 个答案:

答案 0 :(得分:0)

也许你必须实现这些

.flipped输入

.flipped-enter.flipped进入活性

.flipped-leave

.flipped-leave.flipped休假活性

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

enter image description here