css - React Motion CSS 从中心变换

Question

我在 react 中使用 react-motion 进行 CSS 转换。这个波纹管代码从左上角缩放我想要的输出。

<Motion defaultStyle={{ x: 0 }} style={{ x: spring(360) }}>
    {(value) => {
        return (
            <div
                style={{
                    width: value.x,
                    height: value.x,
                    animation: `scale 5s infinite`,
                    transform: `scale(1,1)`,
                }}
            >
                {" "}
                <this.ComponentName post={post} view={view} />
            </div>
        );
    }}
</Motion>

我怎样才能使它从中心缩放？

Answer 1

我已经找到了解决方案。它可以通过一些更改来完成，但这是一个棘手的更改。

<Motion defaultStyle={{ x: 0 }} style={{ x: spring(1) }} >
{value => {return <div style={{
  animation: `scale 5s infinite`,
  transform: `scale(${value.x})`,
}}
> <this.ComponentName post={post} view={view}/></div>}}