从中心弹出答案

【问题标题】：PopIn from center从中心弹出
【发布时间】：2019-07-25 12:01:54
【问题描述】：

我想让我的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。

【问题讨论】：

标签： css animation styled-components

【解决方案1】：

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

它允许您更改从左/上到其他任何位置的变换位置。在您的情况下，您可能需要 center。

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

【讨论】：

感谢您的回答，我刚刚在 StyledComponent 中添加了transform-origin: -50%, -50%;，并在动画中添加了transform-origin: center;。但是盒子已经不在中间了。
已将 -50%, -50% 更改为 -50% -50%。但事实并非如此。
发生这种情况是因为变换原点导致所有变换属性在该位置执行。这对于规模之类的东西不会有问题，但可能是您添加的翻译的问题。您可以尝试在不使用transform 属性的情况下将元素定位在中心，即使用负边距或任何其他使用CSS 使HTML 元素居中的方法。这应该防止元素在变换发生之前/期间或之后发生偏移。希望对您有所帮助。