Question

我希望我的StyledModalWrapper为scale()设置动画。

我的StyledComponent具有以下属性：

top: 50%;
left: 50%;
max-width: ${(props:IModal) => props.width};
min-height: auto;
transform: translate(-50%, -50%);
animation: ${(props:IModal) => props.closing ? popOut : popIn} .3s linear;

动画：

0% {
    transform: scale(0);
}
80% {
    transform: scale(1.25);
}
100% {
    transform: scale(1);
}

在这种情况下，该框可以完美缩放，只有位置不正确。

我尝试添加

0% {
    transform: scale(0) translate(100%, 100%);
}
80% {
    transform: scale(1.25) translate(25%, 25%);
}
100% {
    transform: scale(1) translate(50%, 50%);
}

在这种情况下，它会随着曲线滑动。

盒子的中心应始终位于父对象的中间。
父级的width/height为100vw/100vh。

Answer 1

如果您使用的是transform，则这是您的朋友：transform-origin

它允许您更改以将位置从左/上变换到其他任何位置。您可能需要center。

MDN文档：https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

从中心弹出

1 个答案: