javascript - 文字随着字体大小的增加而抖动
问题描述
我试图通过添加类来增加点击 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>
解决方案
使用比例并调整变换原点:
$("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>
推荐阅读
- ckeditor - 使用ck4.10,无法使用音频标签
- c - STM32 HAL C QuadSPI 显示读写
- c# - 动态填充 WPF C# DataGrid ComboBox ItemsSource
- java - Spring boot - @Service 类调用另一个 @Service 类
- c++ - g++ 和 vc++ 中 wcscpy 的不同行为
- performance - WCF 跟踪中出现无法解释的延迟
- javascript - 如何测试我是否已加载我的 JSON - Angular2+
- asp.net - 用于 ASP.NET Web 应用程序的 SAP Business One DI API
- ide - CodeLite 未显示某些已创建的项目
- html - 我可以在点击时使范围输入的值上下变化吗?