用页面加载动画增加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自动高度

回答

相关问题