CSS 动画/过渡无法正常工作
这是没有动画/转换代码的检查：
<!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会变小并且然后第二次点击后就可以了，请检查一下问题是什么。我只想通过单击来完成它。
DIEA4回答
-
慕盖茨4494581
如果您检查计算出的字体大小，您会发现一些问题：所以我的假设是，由于您正在转换所有 CSS 属性（通过设置您不排除任何属性更改），因此在计算新字体大小时，transition: 0.3s宽度不是 600px。.resize尝试更长的过渡时间，例如 2 秒。您可能需要点击两次以上才能获得最终的字体大小。如果发生这种情况，那么您就发现了问题。如果您还想转换宽度更改，则解决方案是将所需宽度 (600px) 传递给fontResize()而不是依赖于 HTML 元素宽度（将更改 0.3 秒）。 -
三国纷争
文本立即调整大小 - 问题是调整大小函数将黄色矩形的初始尺寸作为调整大小的度量 - 而不是动画完成后的最终尺寸。因此，文本大小调整为相同大小，您看不到任何差异。当您单击该按钮时，您将指示文本调整为黄色矩形的大小。但此时黄色矩形尚未完全调整大小，基本上文本元素的大小是相对于黄色矩形的初始尺寸调整的。要验证这一点，您只需对文本动画应用 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');要点是，确保在单击按钮时确定适当的尺寸。 -
素胚勾勒不出你
由于您通过执行 来硬编码点击处理程序中的最终宽度$('#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}) -
蓝山帝景
添加以下内容：$('#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>
随时随地看视频慕课网APP
相关分类
JavaScript