javascript - 为什么当我使用变换比例时它会移动动画 div 的位置

Question

编辑:我不认为这个问题应该被标记为可能重复，因为它涉及分散注意力的 SVG 信息，我认为不必要的数学。

在下面的关键帧部分，当我省略 transform: scale 时，div 显示在页面中间。这就是我想要的。现在我想让 div 开始变大，不透明度逐渐变小，而 div 变小，div 的中心应该在页面的中心。当我添加变换比例时，div 不再在中心设置动画。为什么？我该如何解决？

   .popup{
        position: absolute;
        width:400px;
        height: 300px;
        left: 50%;
        top: 50%;
        background: limegreen;
        border: 5px solid silver;
        transform: translate(-50%, -50%);
        transition: all 2s;
        opacity: 0;

    }
    .anim{
        animation: popAnim 2s forwards;
    }
    @keyframes popAnim{
        0%{
            transform : scale(1.5);
            opacity: 0;
        }
        100%{
            transform: scale(1);
            opacity: 1;
        }
    }

html:

<div class="popup">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error inventore molestiae, dignissimos ducimus adipisci sint suscipit dolor blanditiis fugit, quia aspernatur quos, facere nostrum! Distinctio praesentium saepe, quaerat modi fuga.</div>
<button class="click">click me</button>

j查询:

$(document).ready( function(){
        $(".click").on("click", function(){
            $(".popup").toggleClass("anim")
        })
});

Answer 1

在声明 transform : scale(1.5); 时，你重写了 transform: translate(-50%, -50%);，所以 transform: scale(1.5) 等价于 transform: translate(0, 0) scale(1.5)。

相反，您需要堆叠转换值，以便保持转换。关键帧动画变为:

  @keyframes popAnim{
    0%{
      transform : translate(-50%, -50%) scale(1.5);
      opacity: 0;
    }
    100%{
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }