如何从中心而不是左上角展开 div

Question

我在屏幕中间有一个登录表单，上面有这个 CSS：

.login-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;

  align-items: center;
  padding: 50px 40px;
  color: white;
  background: rgba(0,0,0,0.8);
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 0.4px 0.4px rgba(128, 128, 128, 0.109),
    0 1px 1px rgba(128, 128, 128, 0.155),
    0 2.1px 2.1px rgba(128, 128, 128, 0.195),
    0 4.4px 4.4px rgba(128, 128, 128, 0.241),
    0 12px 12px rgba(128, 128, 128, 0.35);
}

用户登录后，我想将 div 扩展到 100% 以显示其他内容。 用户按下登录按钮后，div 的 class 变为此 CSS：

.full{
    width: 100%;
    height: 100%;
    transition: 2s;
}

它完成了这项工作，但 div 移动到左上角并从那里开始扩展。 如何让它从中间展开？

Answer 1

不要更改 class，添加它：

document.getElementById("div-id").className += " full";

Answer 2

您可以尝试为此使用转换。 在您的初始 class 中，将 X 比例设置为 0 并将原点转换为中心。 然后在您的 animation class 中，只需将 thr X 比例更改为 1 并将更改转换如下：

.login-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    transform: scaleX(0);
    transform-origin : 50%;


.full {
transform : scaleX(1);
transition : transform 200ms ease-in;
}