react animation on img src change from an array

Question

I have this react code that changes the img src onClick, it gets the new img src from an array, I now want to add an animation to it using react-motion, Everytime the img src changes I want to play the animation so far I got it working threw a ? statement however it only plays every other time it changes I think its very similar to what Im doing. here is the code:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchPosts } from '../actions/index';
import { Link } from 'react-router';

export default class HomePage extends Component {
    constructor() {
        this.state = { index : 0 };
        this.blogPostImages = ['./img/placeholder.jpg', './img/placeholderB.jpg', './img/placeholderC.png'];
    }

    changeBlogPicForwards() {
        let i = this.state.index;
        if (i == this.blogPostImages.length - 1) {
            i = 0; 
        } else {
            i = i + 1; 
        }
        this.setState({index: i});
    }

    changeBlogPicBackwards() {
        let i = this.state.index;
        if (i == 0) {
            i = this.blogPostImages.length - 1; 
        } else {
            i = i - 1;
        }
        this.setState({index: i});
    }

    render() {
        var blogCurrentPic = this.blogPostImages[this.state.index];

        return (
            <div>
                <div className="top-section-actions">
                           <Motion style={{ x: spring( this.state.index ? 1:0 ) }}>
                            {({ x }) =>
                                <div className="image-holder">
                                    <img className="blog-pictures" src={blogCurrentPic} style={{
                                        WebkitTransform: `translate3d(${x}px, 0, 0)`,
                                        transform: `scale(${x}, ${x})`,
                                    }} />
                                </div>
                            }
                        </Motion>
                    <div className="blog-name">
                        <div className="left-arrow-action arrow-icons">
                            <i onClick={(e) => this.changeBlogPicForwards(e)} className="fa fa-arrow-circle-o-left fa-2x" aria-hidden="true"></i>
                        </div>
                        <div className="right-arrow-action arrow-icons">
                            <i onClick={(e) => this.changeBlogPicBackwards(e)} className="fa fa-arrow-circle-o-right fa-2x" aria-hidden="true"></i>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

The type of animation I want does not matter since Im just trying to play any animation after the img src changes,

react animation on img src change from an array

0 Answers0