添加平滑過渡到單擊事件後變得更大的按鈕

使用javascript單擊事件時，我將一個額外的html文本添加到按鈕中（具體來說：一個範圍內的「X」-icon「）。無人顯示：帶開關的財產從顯示翼展圖標級這樣做。塊添加平滑過渡到單擊事件後變得更大的按鈕

因此，該按鈕將變爲，因爲瞬間的單擊事件後，添加圖標的更大

什麼CSS/JS我需要添加，使這個過渡平穩，使按鈕增長緩慢而不是立即更大嗎？

非常感謝和抱歉可能是comp授權提問。

來源

2017-02-19 mikephilipp

提供代碼片段。 –

好吧，我有一個標度特性解決它。我轉換了x圖標的比例，這也慢慢放大了按鈕。

來源

2017-02-20 13:01:26 mikephilipp

是的，你可以添加CSS來做這樣的轉換。但是，您無法使用display：none - > block進行CSS轉換。如果我不記得它是錯誤的，那是因爲它會隨着時間的推移而轉變，並顯示：none/block是一個二進制系統，意味着它只能被顯示或不顯示，中間沒有。我相信可見度可以用來代替，因爲它支持現有的和不存在的這種中間狀態。

看到這個問題：Transitions on the display: property

此外，谷歌「的CSS轉換顯示無塊」，你會得到一堆有用的鏈接。

來源

2017-02-19 23:14:10

非常感謝。我做了一個無盡的谷歌搜索，但沒有找到我正在尋找的答案。我也無法使用可見性，因爲那時x-icon-element只能隱藏，這意味着即使在小按鈕上也會有一個佔位符空格。 – mikephilipp

我以前有過類似的問題，另一個解決方案是使用JavaScript並在顯示它之後進行轉換。所以首先它的隱藏，然後顯示沒有可見性，然後過渡到可見。 –

也許看看https://www.w3schools.com/css/css3_transitions.asp。如果你有一個固定的初始按鈕的寬度，它應該是這樣的：

JS：

$('.mybutton').on('click', function(){ $(this).addClass('clicked') };

CSS：

.mybutton{ 
    width : 90px; 
    transition : width 0.5s ease; 
} 
.mybutton.clicked{ 
    width : 120px; 
}

來源

2017-02-19 23:17:02

謝謝！問題是，我有各種各樣的按鈕，它們有各種各樣的寬度，所以我不能使用固定帶寬。 – mikephilipp

如果你用javascript代替新的寬度，你可以使用它。 $（「＃id」）。css（「width」，newWidth）; –

添加平滑過渡到單擊事件後變得更大的按鈕

回答

相關問題