img src上的动画从数组中改变

Question

我有这个改变img src onClick的代码，它从一个数组中获取新的img src，我现在想用react-motion添加一个动画，每次img src改变我想播放动画到目前为止，我得到它的工作扔了？然而，它只会在每次改变时发生变化，我认为它与我正在做的非常相似。这是代码：

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>
        )
    }
}

我想要的动画类型并不重要，因为我只是在img src更改后尝试播放任何动画，