CSS過渡自動寬度

我有一個元素，其寬度我想動畫時其內容更改。它有width: auto，這永遠不會改變。我已經看到this trick，但這是爲了在兩個值之間進行轉換而設置的。我根本不操縱數值，只使用內容，我希望元素的大小隨着動畫而改變。這是所有可能的CSS？CSS過渡自動寬度

這裏是我的代碼的簡化版本：

.myspan { 
 
    background-color: #ddd; 
 
} 
 

 
.myspan:hover::after { 
 
    content: "\00a0\f12a"; 
 
    font-family: Ionicons; 
 
    font-size: 80%; 
 
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/> 
 
<html> 
 
    <body> 
 
    <span class="myspan">Hello!</span> 
 
    </body> 
 
</html>

我想，當用戶將鼠標懸停在元素進行動畫處理的尺寸變化。

來源

2016-07-28 Luke Taylor

不能動畫僅適用於CSS'auto'。或者使用鏈接的「最大高度」技巧，或者在頁面加載時運行一個設置最終高度的小腳本 – LGSon

@LGSon在這種情況下，如何使用最大寬度技巧，其中兩個值都處於轉換狀態是可變的？ –

另外，你什麼意思是「什麼時候內容」改變了？......他們爲什麼要這樣做？如果您使用JS來做到這一點...那麼使用JS'自動化'寬度變化， –

正如我所說，使用「最大寬度」/「最大高度」的伎倆。

給它一個足夠大的值來容納最廣泛的值。

.myspan { 
 
    display: inline-block; 
 
    font-size: 30px; 
 
    background-color: #ddd; 
 
    vertical-align: bottom; 
 
} 
 
.myspan::after { 
 
    content: " \00a0\f12a "; 
 
    font-family: ionicons; 
 
    font-size: 80%; 
 
    display: inline-block; 
 
    max-width: 0; 
 
    transition: all 1s; 
 
    vertical-align: bottom; 
 
    overflow: hidden; 
 
} 
 
.myspan:hover::after { 
 
    max-width: 80px; 
 
    transition: all 1s; 
 
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" /> 
 

 
<span class="myspan">Hello!</span>

來源

2016-07-28 18:12:22 LGSon

對，在僞元素上執行。我以爲你建議把它放在主要元素，這就是爲什麼我感到困惑;） –

@LukeTaylor如果你的關閉圖標有一個預定義的寬度，你可以只使用寬度，並給僞包含最終寬度圖標 – LGSon

對不起，但你能給我多一點幫助嗎？將'overflow：hidden'與'display：inline-block'結合使離子圖消失。 –

CSS過渡自動寬度

回答

相關問題