用頁面加載動畫增加ul自動高度

我是新的蜜蜂。我想在頁面加載時使用動畫增加自動高度。在CSS中可能嗎？請幫幫我。用頁面加載動畫增加ul自動高度

<ul> 
    <li><a href="/">title 1</a></li> 
    <li><a href="/">title 2</a></li> 
    <li><a href="/">title 3</a></li> 
    <li><a href="/">title 4</a></li> 
    <li><a href="/">title 5</a></li> 
</ul>

來源

2015-04-30 Suresh Kumar

這是可能的，但你可能想要做別的事情。您可以將高度從一個值設置爲下一個值。我認爲你看到的是本教程。 http://designmodo.com/create-css3-mega-menu/ –

實際上，你可以這樣做純粹是在CSS，從而保持關注點嚴格和適當的分離意味着所有的造型保持你的CSS的邊界/範圍：

ul { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    animation-name: grow; 
 
    animation-fill-mode: forwards; 
 
    animation-duration: 2s; 
 
    -webkit-animation-name: grow; 
 
    -webkit-animation-duration: 2s; 
 
    -webkit-animation-fill-mode: forwards; 
 
} 
 
@keyframes grow { 
 
    from { 
 
    max-height: 0 
 
    } 
 
    to { 
 
    max-height: 200px 
 
    } 
 
} 
 
@-webkit-keyframes grow { 
 
    from { 
 
    max-height: 0 
 
    } 
 
    to { 
 
    max-height: 200px 
 
    } 
 
}

<ul> 
 
    <li><a href="/">title 1</a> 
 
    </li> 
 
    <li><a href="/">title 2</a> 
 
    </li> 
 
    <li><a href="/">title 3</a> 
 
    </li> 
 
    <li><a href="/">title 4</a> 
 
    </li> 
 
    <li><a href="/">title 5</a> 
 
    </li> 
 
</ul>

來源

2015-04-30 07:39:36 SW4

此代碼正在工作，但我需要高度自動。 –

@SureshKumar - 簡單的說，您需要將'height'更改爲'max-height'，在上面，只需將'200px'替換爲最大的可預測潛在高度即可。請注意，元素不會長到這個高度，它只會增長到其內容所需的高度，直到該值。因此，元素只會隨其內容一樣增長。 – SW4

用頁面加載動畫增加ul自動高度

回答

相關問題