我正在尝试使用包react-moves创建的动画无法正确渲染背景色

Question

我正在使用react包react-moves创建三个单独的条纹的动画，这些动画将在页面刷新时出现在页面上。 背景颜色似乎无法正确呈现。 我的反应成分在下面输入；

class Stripes extends Component {

state = {
    stripes: [
        {
            background:'#98c5e9',
            left: 120,
            rotate: 25,
            top: -260 ,
            delay: 0
        },
        {
            background:'#ffffff',
            left: 360,
            rotate: 25,
            top: -397,
            delay: 500
        },
        {
            background:'#98c5e9',
            left: 600,
            rotate: 25,
            top: -498,
            delay: 1000
        }
    ]
}

AnimatedStripesHander = () => (
    this.state.stripes.map((stripe, index) => (
        <Animate
            key={index}
            show={true}

            start={{
                background: '#ffffff',
                opacity: 0,
                left: 0,
                rotate: 0,
                top: 0
            }}

            enter={{
                background: [stripe.background],
                opacity: [1],
                left: [stripe.left],
                rotate: [stripe.rotate],
                top: [stripe.top],
                timing: { delay: stripe.delay, duration: 500, ease: easePolyOut },
                events: {
                    end() {
                        console.log(stripe.background)
                    }
                }
            }}

        >
        {({opacity,left,rotate,top,background})=>{
                return(
                    <div
                        style={{
                            background,
                            opacity,
                            transform: `rotate(${rotate}deg) translate(${left}px,${top}px)`
                        }}
                    ></div>
                );
            }}
        </Animate>
    ))
)

我遇到的问题是在底部返回的样式对象中的背景标签。 这种背景是错误的，但我似乎无法理解为什么。 当我将其删除时，动画中的所有其他内容都可以很好地工作，但是背景色却不能，有人对反应移动有任何经验吗？

谢谢

Answer 1

没有npm包react-moves所以我假设您正在使用react-move 。

react-move的文档说您需要使用第三方程序包才能使用颜色插值：

https://github.com/react-tools/react-move#cadillac-interpolation----depends-on-d3-interpolate