React Motion CSS 从中心变换

Question

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

<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>}}

React Motion CSS 从中心变换

React Motion CSS transform from center

css

jsx

reactjs

react-motion