这是没有动画/转换代码的检查：<!DOCTYPE html><html><head> <style> </style></head><body> <!DOCTYPE html><html><head> <style> .resize { font-size: 2.8vh; white-space: nowrap; color: black; background: yellow; cursor: move; width: 300px; height: 130px } </style></head><body> <button class="do-resize" type="button" >Click Me!</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css"> <div class="resize" id="chartdiv">Some name that is very long</div></body></html> <script type="text/javascript"> $.fn.fontResize = function() { return this.each(function() { const $el = $(this); $el.css('font-size', ($el.width() * $el.height()) / 2800 + 'px'); });}$('button.do-resize').click(function(){ $('#chartdiv').width(600).fontResize()// use plugin function})$('.resize').resizable({ minWidth: 210, minHeight: 120, resize: function(event, ui) { $(this).fontResize();// use plugin function }}); </script></body></html>现在这是动画/过渡代码：我只是在这里添加了 div 类的 CSS 过渡.resize{transition: 0.3s;}，我认为它应该可以工作，但问题是这不适用于单击，如果我单击一次，则文本font-size会变小并且然后第二次点击后就可以了，请检查一下问题是什么。我只想通过单击来完成它。
4 回答
慕盖茨4494581
TA贡献1850条经验 获得超11个赞
如果您检查计算出的字体大小，您会发现一些问题：
所以我的假设是，由于您正在转换所有 CSS 属性（通过设置您不排除任何属性更改），因此在计算新字体大小时，transition: 0.3s宽度不是 600px。.resize尝试更长的过渡时间，例如 2 秒。您可能需要点击两次以上才能获得最终的字体大小。如果发生这种情况，那么您就发现了问题。
如果您还想转换宽度更改，则解决方案是将所需宽度 (600px) 传递给fontResize()而不是依赖于 HTML 元素宽度（将更改 0.3 秒）。
三国纷争
TA贡献1804条经验 获得超7个赞
文本立即调整大小 - 问题是调整大小函数将黄色矩形的初始尺寸作为调整大小的度量 - 而不是动画完成后的最终尺寸。因此，文本大小调整为相同大小，您看不到任何差异。
当您单击该按钮时，您将指示文本调整为黄色矩形的大小。但此时黄色矩形尚未完全调整大小，基本上文本元素的大小是相对于黄色矩形的初始尺寸调整的。
要验证这一点，您只需对文本动画应用 setTimeout，您就会看到，如果黄色矩形有时间进行动画处理，则文本元素将按照您的预期进行动画处理。
要明白我的意思，请将点击处理程序替换为以下代码。
$('button.do-resize').click(function() {
$('#chartdiv').width(600) setTimeout(function() {
$('#chartdiv').fontResize()
}, 300)
})所以你看，如果你给矩形扩展时间，文本将能够从中获得更大的尺寸来扩展。
但是如果你硬编码最终的字体大小，动画将立即开始
代替：
$el.css('font-size', ($el.width() * $el.height()) / 2800 + 'px');尝试：
$el.css('font-size','40px');要点是，确保在单击按钮时确定适当的尺寸。
素胚勾勒不出你
TA贡献1827条经验 获得超9个赞
由于您通过执行 来硬编码点击处理程序中的最终宽度$('#chartdiv').width(600)，因此您不妨将其作为参数传递以帮助您调整文本大小。
而不是这样的：
$el.css('font-size', ($el.width() * $el.height()) / 2800 + 'px');
更像这样的东西：
$el.css('font-size', (parameter * parameter) / 2800 + 'px');
这是一个正在运行的JSFiddle。
在我的示例中，所有内容都会立即动画到正确的位置。
请参阅我所做更改的评论：
$.fn.fontResize = function(newSize) { // receive parameter
return this.each(function() {
$el = $(this)
const halfSize = newSize/2 // divide width by 2
$el.css('font-size', (halfSize * halfSize) / 2800 + 'px'); // apply in calculation
});
}
$('button.do-resize').click(function(){
const newSize = 600 // declare as const to use twice in next line
$('#chartdiv').width(newSize).fontResize(newSize) // pass as parameter to fontResize
})
蓝山帝景
TA贡献1843条经验 获得超7个赞
添加以下内容：
$('#chartdiv').on('transitionend', function () {
$(this).fontResize()
});
每次转换结束时都会触发fontResize()，以确保使用正确的 div。
$.fn.fontResize = function() {
return this.each(function() {
const $el = $(this);
$el.css('font-size', ($el.width() * $el.height()) / 2800 + 'px');
});
}
$('button.do-resize').click(function() {
$('#chartdiv').width(Math.random()*600).fontResize() // use plugin function
})
$('#chartdiv').on('transitionend', function () {
$(this).fontResize()
});
$('.resize').resizable({
minWidth: 210,
minHeight: 120,
resize: function(event, ui) {
$(this).fontResize(); // use plugin function
}
});
.resize {
font-size: 2.8vh;
white-space: nowrap;
color: black;
background: yellow;
cursor: move;
width: 300px;
height: 130px
}
.resize {
transition: 0.3s;
}
<button class="do-resize" type="button">Click Me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<div class="resize" id="chartdiv">Some name that is very long</div>
添加回答
举报
0/150
提交
取消