Ufdjrw

Trying to get a simple fade in/out transition working.

I've tried moving the <CSSTransition> around into different areas to no avail. I'm using this successfully in another component that's mapping children but can't see why it wouldn't work in this case since I'm rendering it together with the child component, if the child gets returned at all.

Child component

const Error = (props) => 
 return (
 <CSSTransition timeout=400 classNames=errorTransition>
 <span> props.errorString </span>
 </CSSTransition>
 )

Parent component

import React, Component from 'react';
import connect from 'react-redux';
import CSSTransition from 'react-transition-group';

import type InfoState from './state';
import closeError from './actions';

const mapStateToProps = (state: info: InfoState) => (
 info: state.info.data.info,
 infoError: state.info.infoError,
);

const mapDispatchToProps = dispatch => (
 closeError: () => dispatch(closeError()),
);

class Parent extends Component<Props, State> 
 state = info: this.props.info ;

 handleChange = (e) => 
 this.setState( info: e.target.value );
 this.props.closeError();
 

 render() 
 if (this.props.info === null) 
 return (
 <div className="info-wrapper">
 <input
 type="text"
 value=this.state.info ? this.state.info : '' 
 onChange=this.handleChange
 />
 </div>
 <div className="info-error">
 this.props.infoError !== ''
 ? <Error 
 key=this.state.info 
 errorString=this.props.infoError 
 />
 : null
 
 </div>
 )
 
 return ( <div> things </div> )
 

CSS

.errorTransition-enter 
 opacity: 0.01;

.errorTransition-enter-active 
 opacity: 1;
 transition: all 400ms ease-out;

.errorTransition-exit 
 opacity: 1;

.errorTransition-exit-active 
 opacity: 0.01;
 transition: all 400ms ease-out;

I was having a similar issue with conditionally removing an element wrapped with <CSSTransition>. To solve the problem I wrapped the <CSSTransition> element with a <TransitionGroup> element and used its childFactory prop. The childFactory prop can be used like so:

 <TransitionGroup
 childFactory=child => React.cloneElement(child)
 >
 <CSSTransition timeout=400 classNames=errorTransition>
 <span> props.errorString </span>
 </CSSTransition>
 </TransitionGroup>