javascript - 为什么这个CSS动画(transform : scale) starting in the wrong location?

Question

我有这个示例代码 http://codepen.io/anon/pen/yaZopZ (下面的相关片段)，当您单击按钮时，模态元素应该通过在屏幕中央打开并从无到全尺寸来设置动画。但是，它在动画开始时在右下角打开，然后在屏幕中央结束。我需要对该代码进行哪些更改才能使其按预期工作？

它的行为应该类似于 http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_image 中的动画当你点击图片时。但与该示例不同的是，我的示例会在您在后台单击时关闭模式，并且需要保留该功能。

这是动画部分

@keyframes animatezoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

这就是动画

.modal {
  display: block;
  width: 600px;
  max-width: 100%;
  height: 400px;
  max-height: 100%;
  position: fixed;
  z-index: 100;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: white;
  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
  animation: animatezoom 0.3s;
}

如果问题不在这里，其余代码在我上面发布的代码笔中 ( http://codepen.io/anon/pen/yaZopZ )。

Answer 1

这是因为您正在将模态的转换属性从 translate 更改为 scale ，您应该做的是将它们一起使用: DEMO

@keyframes animatezoom {
  from {
    transform: translate(-50%, -50%) scale(0)
  }
  to {
    transform: translate(-50%, -50%) scale(1)
  }
}