React CSS Transition to change visible component with onClick through state - css

Question

I don't understand whats wrong here, I've done this before and I'm sure this is the way. I even copy and pasted two separate examples. Just trying to get the CSS transition Group going so that when a button is clicked and the state changes, the right component appears but with an effect. I'm getting nothing
The component showing depends on the state value: 1, 2 or 3. I just want for when that state changes and another component is being displayed rather than the one before for there to be an animation to make one leave and another arrive
Whatever visible component there is it is clear that there is a way to navigate back and forth between options as the each are sent an onClick method to change the state of the class
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
class LoginClass extends Component{
constructor(props) {
super(props);
this.state = {loginCompState: 0};
this.showInitial = this.showInitial.bind(this);
this.showPro = this.showPro.bind(this);
this.showUser = this.showUser.bind(this);
}
showPro(){
this.setState({
loginCompState: 1
});
};
showUser(){
this.setState({
loginCompState: 2
});
};
showInitial(){
this.setState({
loginCompState: 0
});
};
render(){
return(
<div>
<ReactCSSTransitionGroup
transitionName='fade'
transitionEnterTimeout={500}
transitionLeaveTimeout={500}>
{(this.state.loginCompState === 0) ?
<InitialComp proOnClick={this.showPro} userOnClick={this.showUser} /> :
(this.state.loginCompState === 1) ?
<ProLoginChoices backInitial={this.showInitial} /> :
<UserLoginChoices backInitial={this.showInitial} />}
</ReactCSSTransitionGroup>
</div>
)
}
}
accompanying CSS:
.fade-enter {
right: 100px;
}
/* End State of Animation */
.fade-enter-active {
right: 0px;
transition: .5s ease-in all;
}