Переходы на JavaScript - PullRequest
Новая
       11

Переходы на JavaScript

0 голосов
/ 18 марта 2019

Я использую этот код для масштабирования контейнера, но если я использую переход 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>

1 Ответ

0 голосов
/ 18 марта 2019

Если честно, я никогда раньше не использовал масштабирование свойств, но оно показывает редкое поведение с переходом. Итак, я немного изменил ваш код. Посмотри. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...