首頁猿問 CSS 動畫/過渡無法正常工作

CSS 動畫/過渡無法正常工作

JavaScript

DIEA 2024-01-18 10:49:33

這是沒有動畫/轉換代碼的檢查：<!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 秒）。

反對回復 2024-01-18

三國紛爭

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');

要點是，確保在單擊按鈕時確定適當的尺寸。

反對回復 2024-01-18

素胚勾勒不出你

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

})

反對回復 2024-01-18

藍山帝景

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>

反對回復 2024-01-18

4 回答
0 關注
213 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

CSS 動畫/過渡無法正常工作

CSS 動畫/過渡無法正常工作

4 回答

添加回答