Question

我试图通过传递新道具并再次设置状态来重新为StaggeredMotion动画制作反应动画。我相信调用了渲染方法，但动画不再出现。这是我的编辑render（）方法：

render() {
    let configs = [];
    Object.keys(this.state.ripples).forEach(key=> {
        configs.push({
            opacity: spring(1, [95, 20]),
            scale: spring(0),
            fill: this.props.style.fill,
            strokeWidth: this.props.style.strokeWidth,
            stroke: this.props.style.stroke,
            transformOrigin: '50% 50%'
        });
    });

    return (
        <StaggeredMotion defaultStyles={configs} styles={prevStyles => prevStyles.map((_, i) => {
        return i === 0 ? {
            opacity: spring(0, [95, 20]),
            scale: spring(1),
            fill: this.props.style.fill,
            strokeWidth: this.props.style.strokeWidth,
            stroke: this.props.style.stroke,
            transformOrigin: '50% 50%'
        } : prevStyles[i - 1]
        })}>
            {interpolatedStyles =>
                <g>
                    {Object.keys(interpolatedStyles).map(key=> {
                        const {...style} = interpolatedStyles[key];
                        return (
                            <circle key={key} {...this.props} style={{
                            transform: `scale(${style.scale})`, opacity: `${style.opacity}`,
                            ...style
                            }}/>
                        )
                    })}
                </g>
            }
        </StaggeredMotion>
    )
}

我已尝试在componentWillReceiveProps中设置状态，并验证是否收到了新的道具以将this.state.ripples设置为新数组，但动画不再发生，它只发生在第一次呈现元件。

Answer 1

问题：你是如何设置状态的？

React文档说：Treat this.state as if it were immutable.

每次你想要改变状态，并且在你的情况下重新制作动画时，你需要使用setState()而不是直接操纵this.state。

您发布的代码数量不清楚您的组件发生了什么，但如果您没有使用setState()，那么您将要更改它。

如何再次触发StaggerMotion进行反应运动？

1 个答案: