如何设置css缩放属性的动画

Question

是否可以获得css zoom属性的平滑过渡？

我google了很多，但关键字“css”和“zoom”的结果总是关于转换和转换。所以，我不想知道如何用变换和缩放等来做到这一点。只是使用css zoom属性。

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

function zoomIn(tg) {
    let fr = 100;
    setInterval(function() {
        if(fr < 200) {
            fr++;
            tg.style.zoom = fr + "%";
        };
    }, 5);
}

function zoomOut(tg) {
    let fr = 200;
    setInterval(function() {
        if(fr > 100) {
            fr--;
            tg.style.zoom = fr + "%";
        };
    }, 5);
}


document.querySelector('div').addEventListener('click', function(e) {
  if(e.target.classList.contains('zoom')) {
      e.target.classList.remove("zoom")
      zoomOut(e.target);
  } else {
      e.target.classList.add("zoom");
      zoomIn(e.target);
  }
});

div {
  width: 50px;
  height: 50px;
  background: red;
  cursor: pointer;
  transition: .5s;
}

<div>click me!</div>

Answer 2

非标准此功能是非标准的，不在标准轨道上。不要在面向Web的生产站点上使用它：它不适用于每个用户。实现之间可能存在很大的不兼容性，并且行为可能在将来发生变化。

非标准缩放CSS属性可用于控制元素的放大级别。如果可能，应使用transform :(而不是this属性）。但是，与CSS Transforms不同，zoom会影响元素的布局大小。

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>

Answer 3

您可以使用css transition，为您的情况：

.zoom {
    transition: width 1s, height 1s;
}

这里所有宽度和高度div变化的时间都会达到1秒