Question

我有一个从后端返回的项目列表。每个项目通过div形成一种图块，我想在第一次呈现时以及单独呈现动画。问题是这些项目一起返回，我的渲染函数将它们全部渲染在一起。因此，css动画将同时在每个瓷砖上可见，而我想要的是随机播放＆＃34;每个瓷砖的弹跳效果：每个瓷砖应该在2秒内出现，但是随机出现，而不是一起出现。

这可能吗？

Answer 1

您可以使用velocity.js的交错功能来完成任务，或者您自己编写类似的内容：创建一个单独的数组，该数组将填充此类型{divElement, timeout}的元素 - 让我们调用此数组pairs（填充它遍历原始数组并在0＆lt; 2mins范围内为每个元素分配一个超时），以及一个空数组，你将在渲染函数中使用它（不是原始数组）一） - newArray。准备好pairs数组后，遍历它并在每个元素上调用此函数：

 pairs.forEach(({divElement, timeout})=> {
      setTimeout(()=>{
        newArray.push(divElement)
      }, timeout)
 })

就是这样，你立刻渲染newArray的内容（将它映射到我猜想的jsx数组），它最终会被你在开始时拥有的所有div所填充。

Answer 2

class AnimateItemComponent extends React.Component
{
    static propTypes = 
    {
        animate: React.PropTypes.bool
    };

    render()
    {
        let aniamte = this.props.aniamte;
        let style = {};
        let className = ["item-class"];
        let time = parseInt(Math.random() * 2000); // Maximum of 2 seconds

        if (aniamte)
        {
            // Consider support more prefixes 
            style.animationDelay = time + "ms";
        }

        if (this.props.active)
            className.push("animate"); // Class the activate the animation

        return React.createElement("div", {className, style}, "My text");
    }
}

class AnimateComponent extends React.Component
{
    constructor()
    {
        this.state = {};

        // Initialize the value to keep the prop types boolean
        this.state.aniamte = false;

        // Our items to handle, can be easily replaced with the setState.
        this.state.items = ["a", "b", "c", "d", "e"];
    }

    render()
    {
        let content = [];
        let items = this.state.items;
        let aniamte = this.state.aniamte;

        content = items.map(item =>
        {
            return React.createElement(AnimateItemComponent, {animate});
        });

        return content;
    }

    startAnimation()
    {
        this.setState({aniamte: true});
    }

    stopAnimation()
    {
        this.setState({aniamte: false});
    }

    serverRequest()
    {
        // Activate animation:
        this.startAnimation();

        // Stop animation
        this.stopAnimation();
    }
}

如何为每个div设置一次和单独的动画

2 个答案: