vsvanshi:

I am very new to handle Animations using ReactJS. I have been trying to animate a text Array (ex items: ["Text 1", "Text 2, "Text 3", ...] in such a way that at a given point of time only one is visible and it keeps on looping through all the items. Without animations, its straight forward, but I want to achieve this with animations in place (like fading in/out etc)

I tried ReactCSSTransitionGroup but all the examples given in its docs cover only adding and removing to an array and showing all of them together.

This is what I have tried till now

export default class TextAnimate extends Component{
    constructor(props){
       super(props);
       this.state = {
                selectedText : this.props.items[0]
            }
            this.itemCounter = 0;
       }
    componentDidMount() {
            var context = this;
            if(this.props.items.length > 1){
                this.intervalTimer = window.setInterval(()=>{
                    context.setState({selectedText:this.props.items[context.itemCounter++]})
                    if(context.itemCounter == context.props.items.length){
                        context.itemCounter = 0;   
                    }
                },3000);
            }
        }
    render(){
            return(
                    transitionName="example"
                    transitionAppear={true}
                    transitionAppearTimeout={1500}
                    transitionEnterTimeout={800}
                    transitionLeaveTimeout={800}>

                        {this.state.selectedText}


            );
        }
    }