javascript - 如何为 css 缩放属性设置动画

Question

css 缩放属性是否可以平滑过渡？

我在谷歌上搜索了很多，但关键字“css”和“zoom”的结果总是关于转换和过渡。所以，我不想知道如何使用变换和缩放等来做到这一点。只需使用 css 缩放属性即可。

document.querySelector('div').addEventListener('click', function(e) {
  e.target.classList.toggle('zoom');
});

div {
  width: 50px;
  height: 50px;
  background: red;
  cursor: pointer;
}

.zoom {
  zoom: 200%;
}

<div>click me!</div>

Answer 1

Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The non-standard zoom CSS property can be used to control the magnification level of an element. transform: scale() should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.

MDN

因此，您可以为此使用scale。

document.querySelector('div').addEventListener('click', function(e) {
  e.target.classList.toggle('zoom');
});

div {
  width: 50px;
  height: 50px;
  background: red;
  cursor: pointer;
  transition:.5s;
  transform-origin:left top;
}

.zoom {
  transform:scale(2);
}

<div>click me!</div>