2

我有这个改变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 更改后尝试播放任何动画，

4

0 回答 0