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

时间:2019-02-20 19:46:25

标签: javascript css zoom

css zoom属性能否平滑过渡?

我在Google上搜索了很多,但是关键字“ css”和“ zoom”的结果始终与转换和过渡有关。因此,我不想知道如何使用变换和缩放等方法。只是具有css zoom属性。

@model Api.Model.SignUpViewModel
document.querySelector('div').addEventListener('click', function(e) {
  e.target.classList.toggle('zoom');
});
div {
  width: 50px;
  height: 50px;
  background: red;
  cursor: pointer;
}

.zoom {
  zoom: 200%;
}

3 个答案:

答案 0 :(得分:1)

  

非标准此功能是非标准的,不是标准的   跟踪。不要在面向Web的生产站点上使用它:   为每个用户服务。两者之间也可能存在很大的不兼容性   实施和行为可能会在将来发生变化。

     

非标准zoom CSS属性可用于控制   元素的放大倍数。转换:应该使用scale()   如果可能,请使用此属性代替。但是,与CSS转换不同,   缩放会影响元素的布局大小。

     

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>

答案 1 :(得分: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>

答案 2 :(得分:0)

对于您的情况,您可以使用css transition

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

在这种情况下,宽度和高度div的更改每次都会得到1秒