javascript上的过渡答案

【问题标题】：Transitions on javascriptjavascript上的过渡
【发布时间】：2019-03-18 19:06:58
【问题描述】：

我正在使用此代码对容器进行缩放，但如果我在容器上使用过渡 CSS 但不起作用。

有人可以帮帮我吗？

var zoom = 1;

document.getElementById('mas').addEventListener('click', function(e) {
  zoom += 0.1;
  resize();
});
document.getElementById('menos').addEventListener('click', function(e) {
  if (zoom > 0.2) {
    zoom -= 0.1;
    resize();
  }
});

function resize() {
  document.getElementById('contenedor').style.zoom = zoom;
  document.getElementById('value').innerHTML = zoom.toFixed(2) + '%';
}

#contenedor {
  width: 300px; 
  height: 200px; 
  background: red; 
  transition: 1s ease
}

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="contenedor"></div>

    <input type="button" value="Aumentar" id="mas" />
    <input type="button" value="Disminuir" id="menos" />
    <span id="value">x1</span>
  </body>
</html>

【问题讨论】：

标签： javascript transition

【解决方案1】：

老实说，我以前从未使用过属性缩放，但它显示出一种罕见的过渡行为。所以，我稍微改变了你的代码。看看吧。

var zoom = 1;
var container = document.getElementById("contenedor");
var containerHeight = container.offsetHeight;
var containerWidth = container.offsetWidth;

document.getElementById("mas").addEventListener("click", function(e) {
  zoom += .10;
  resize();
});
document.getElementById("menos").addEventListener("click", function(e) {
  if (zoom > 0.2) {
    zoom -= .10;
    resize();
  }
});

function resize() {
  container.style.height = String(containerHeight * zoom + "px");
  container.style.width = String(containerWidth * zoom + "px");
  document.getElementById("value").innerHTML = zoom.toFixed(2) + "%";

}

#contenedor {
  width: 300px;
  height: 200px;
  background: red;
  transition: 1s ease;
  transform-origin: 0 0;
  transform: scale(1.0);
}

<!DOCTYPE html>
<html lang="en">

<body>
  <div id="contenedor"></div>

  <input type="button" value="Aumentar" id="mas">
  <input type="button" value="Disminuir" id="menos">
  <span id="value">x1</span>
</body>

</html>

【讨论】：

更改大小为 px 时出现问题。如果容器内有对象，则这些对象不会改变。这就是我使用缩放属性的原因。
天哪。上面的代码将与容器内内容的动态样式完美配合，或者您可以尝试 transform: scale() 就像我在这里尝试过的那样：link 问题是，容器最终会覆盖输入字段，但是它可以与一些设计更改一起使用。否则你需要查找插件。