react的动画ReactCSSTransitionGroup

react的动画用法   ReactCSSTransitionGroup

    项目中安装 npm install --save -dev react-addons-css-transition-group

   项目中使用   import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

   组建中应用     <ReactCSSTransitionGroup
      transitionName="example"
      transitionAppear={true}
      transitionAppearTimeout={1500}
      transitionEnterTimeout={1500}
      transitionLeaveTimeout={1300}
      transitionEnter={true}
      transitionLeave={true}>
            <Coupon couponTip={this.state.couponTip} app_coupon={this.state.app_coupon} coupon_app_sure={this.state.coupon_app_sure} hidden_coupon={this.hidden_coupon} coupun_flag={this.coupun_flag} ref="formadd" success_word={this.state.success_word} gotoShare={this.gotoShare} gotoSign={this.gotoSign}/>
               </ReactCSSTransitionGroup>

scss中编写

   
.example-appear {
  opacity: 0.01;
}
.example-appear.example-appear-active {
  opacity: 1;
  transition: opacity 1.5s ease-in;
}

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 1500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 1300ms ease-in;
}