ReactCSSTransitionGroup无效果

Question

我正试图用ReactCSSTransitionGroup从我的状态中动画一个项目数组。appear和enter类可以正常工作，但是leave类不会触发。我要把我的减速机里的东西

state.deleteIn(['globalArray','array'])

把它装满

state.setIn(['globalArray', 'array'], action.newItems)

渲染功能：

 return (
<ReactCSSTransitionGroup transitionAppearTimeout={2000} transitionEnterTimeout={10000}
                         transitionLeaveTimeout={10000} transitionName={animation} transitionAppear={true}>
  <Paper zDepth={2}>

      <ReactImageFallback
        src={ item.imagesrc }
        fallbackImage={ item.imagesrc }
      />
  </Paper>
</ReactCSSTransitionGroup>)

Css (仅用于测试)：

.enter {
}

.enter.enterActive {
}

.leave {
    transform: translate(+100%,+50%) ;
}

.leave.leaveActive {
    transition-timing-function: ease-in;
}

.appear {
    opacity: 0;
    transform: translate(-100%,-50%) ;
}

.appear.appearActive {
    transition-duration: 5s ;
    transition-timing-function: ease-out;
}

我也在使用cssNext。是否有办法在删除时触发休假类？

Answer 1

您可以更新您的状态，但不使用它来呈现您的元素(或者至少不是从您共享的代码中)。

如果您希望根据组件的状态在“输入”或“离开”时动画化Paper。例如：

render() {
    let items = this.state.items.map(item => (
        <Paper zDepth={2} key={/* unique key or index here */}>
            <ReactImageFallback
                src={ item.imagesrc }
                fallbackImage={ item.imagesrc }
            />
        </Paper>
    ));
    return (
        <ReactCSSTransitionGroup /*transitionE... props here */>
            {items}
        </ReactCSSTransitionGroup>
    );
}

Answer 2

我经历了同样的事情，并跟踪这个问题，直到我从页面中删除了ReactCSSTransitionGroup组件，而我应该只是在其中删除所需的元素。

这(工程)：

render() {
  return (
    <div>
      <ReactCSSTransitionGroup /*...props...*/>
        {display && <ItemToRemoveFromPage />}
      </ReactCSSTransitionGroup>
    </div>
  );
}

而不是这样(不起作用)：

render() {
  return (
    <div>
      {display && (
        <ReactCSSTransitionGroup /*...props...*/>
          <ItemToRemoveFromPage />
        </ReactCSSTransitionGroup>
      )}
    </div>
  );
}