想用ReactCSSTransitionGroup实现动画 ，如何改才能生效？

Question

https://github.com/KellyLy/re...
这个是别人的react tab切换demo,我想改一改做成渐瘾渐出的效果

样式是这样写的：

.Tab_item {
  display: none;
}
.show {
  display: block;
}

.Tab_item-enter {
  opacity: 0;
  transition: opacity 1s;
}

.Tab_item-enter-active {
  opacity: 1;
}

.Tab_item-leave {
  opacity: 1;
  transition: opacity 1s;
}

.Tab_item-leave-active {
  opacity: 0;
}

代码我是这样写的：

{/*Tab内容区域*/}
<div className="Tab_item_wrap">
  <ReactCSSTransitionGroup transitionName="Tab_item">
  {
    React.Children.map(this.props.children,(el,index)=>{
      return(
        <div className = 'Tab_item'>{ el }</div>
      );
    })
  }
  </ReactCSSTransitionGroup>
</div>

可是我失败了。。。 到底是哪里出错了？

Answer 1

你需要用到 react-static-container 第三方库，然后可以参考：

import StaticContainer from 'react-static-container'
import ReactCssTransitionGroup from "react-addons-css-transition-group";

componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.location.pathname !== this.props.location.pathname) {
        this.setState({ previousPathname: this.props.location.pathname })
    }
}

componentDidUpdate() {
    if (this.state.previousPathname) {
        this.setState({ previousPathname: null })
    }
}

<ReactCssTransitionGroup
    component="div"
    className="transition_wrapper"
    transitionEnterTimeout={300}
    transitionLeaveTimeout={300}
    transitionName="fade" >

    <StaticContainer
        key={this.state.previousPathname || this.props.location.pathname}
        shouldUpdate={!this.state.previousPathname} >
        
        { this.props.children }
    </StaticContainer>

</ReactCssTransitionGroup>