javascript - CSS 缩放属性破坏字体的外观

Question

我在使用 CSS zoom 属性放大和缩小多个元素时遇到问题，如果不显示实际效果很难解释，所以我将其上传到 youtube 上:
here it is
我希望字体比这更平滑，希望如此。
我在这里尝试使用 scale 属性，但它会破坏定位，这些是我当前的功能:

let zoom_param = 1;
function zooming_out(on_off) {
if (on_off == 0) {
    if (zoom_param >= 0.1) {
    zoom_out = setInterval(function() {
            blocks.style.transition = 50 + 'ms';
            blocks.style.zoom =  zoom_param;
            side_blocks.style.transition = 50 + 'ms';
            side_blocks.style.zoom =  zoom_param;
            zoom_param -= 0.001;
        }, 5);
    }
} else {
    clearInterval(zoom_out);
}
}
function zooming_in(on_off) {
if (on_off == 0) {
    zoom_in = setInterval(function() {
            blocks.style.transition = 50 + 'ms';
            blocks.style.zoom =  zoom_param;
            side_blocks.style.transition = 50 + 'ms';
            side_blocks.style.zoom =  zoom_param;
            zoom_param += 0.001;
        }, 5);
} else {
    clearInterval(zoom_in);
}
}

它们被 mousedown 和 mouseup 事件调用(idk 如果它很重要)，
感谢您的帮助!

Answer 1

CSS 属性缩放没有得到很好的支持。尝试使用 transform 代替。不需要计时器，动画也会很流畅。希望这些代码片段可以帮助到您。

var element = document.querySelector('.element');
element.style.transition = 'transform';
element.style.transitionTimingFunction = 'linear';
element.style.transformOrigin = 'left top';
element.style.transitionDuration = '2s';

let zoomMin = 1;
let zoomMax = 2;

document.querySelector('.zoom-in').addEventListener('click', function(e) {
	zoomingIn();
});

document.querySelector('.zoom-stop').addEventListener('click', function(e) {
	zoomingStop();
});

document.querySelector('.zoom-out').addEventListener('click', function(e) {
	zoomingOut();
});

function zoomingStop() {
	let scaleX = element.getBoundingClientRect().width / element.offsetWidth;
  element.style.transform = 'scale(' + scaleX + ', ' + scaleX + ')';
}

function zoomingIn() {
	element.style.transform = 'scale(' + zoomMax + ', ' + zoomMax + ')';   
}

function zoomingOut() {
	element.style.transform = 'scale(' + zoomMin + ', ' + zoomMin + ')';  
}

div {
  margin: 20px;
  padding: 20px;
  width: 100px;
  height: 100px;
  background: #0095ff;
}

<button class="zoom-in">zoomIn</button>
<button class="zoom-stop">stop</button>
<button class="zoom-out">zoomOut</button>

<div class="element">
  <p>Some</p>
  <p>Text</p>
</div>