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

【问题标题】：How to expand div from center instead of top left如何从中心而不是左上角展开 div
【发布时间】：2020-06-23 20:39:46
【问题描述】：

我有一个位于屏幕中间的登录表单，带有这个 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 的类将更改为此 CSS：

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

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

【问题讨论】：

寻求代码帮助的问题必须包含最短代码以便在问题本身中包含重现它所必需的最好是Stack Snippet。见How to create a Minimal, Reproducible Example

标签： html css reactjs

【解决方案1】：

不要更改类，添加它：

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

【讨论】：

现在它只是跳到宽度和高度 100% 没有任何过渡
试试这个过渡：所有 2s 轻松；

【解决方案2】：

您可以尝试为此使用转换。在您的初始类中，将 X 比例设置为 0 并将原点转换为中心。然后在您的动画类中，只需将 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;
}

【讨论】：