javascript - 文本在增加字体大小时抖动

Question

我试图通过添加类来增加点击 jquery 的字体大小，但面临一个非常奇怪的问题。文本在变大时开始晃动。谁能给我一个解决方案并向我解释为什么会这样？实际上，我已经尝试过 scale 并且我的文字在 transform: scale 上没有晃动，但我不想在那里进行缩放。它应该通过字体大小来解决。

gif 质量不流畅，但正如您所见，它在上下晃动。

这是代码的工作示例。

$("div h3").click(function() {
	$("div h3").removeClass("active");
	$(this).addClass("active");
})

body {
  font-family: 'Roboto', sans-serif;
}
div {
  
}
div h3 {
  font-size:40px;
  font-weight:800;
  opacity:0.3;
  margin:0;
  transition:0.4s ease all;
}
div h3.active {
  font-size:60px;
  opacity:1;
  transition:0.4s ease all;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap" rel="stylesheet">

<div>
  <h3>Hello</h3>
  <h3>Hello</h3>
  <h3>Hello</h3>
</div>

Answer 1

使用缩放并调整变换原点:

$("div h3").click(function() {
	$("div h3").removeClass("active");
	$(this).addClass("active");
})

body {
  font-family: 'Roboto', sans-serif;
}
div {
  overflow:hidden;
}
div h3 {
  font-size:40px;
  font-weight:800;
  opacity:0.3;
  margin:0;
  transition:0.4s ease all;
  transform-origin:left;
}
div h3.active {
  transform:scale(1.5);
  opacity:1;
  transition:0.4s ease all;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap" rel="stylesheet">

<div>
  <h3>Hello</h3>
  <h3>Hello</h3>
  <h3>Hello</h3>
</div>