带有动画的上滑菜单答案

【问题标题】：Slide up Menu with animation带有动画的上滑菜单
【发布时间】：2013-09-29 12:35:44
【问题描述】：

我做了这个：

<div class="example">
    <div class="menuholder">
        <ul class="menu slide">
            <li>
                <a href="#" class="Burgergemeinde">
                    Burger-gemeinde
                    <div class="rojo"></div>
                </a>
            </li>
            <li>
                <a href="#" class="Seniorenwohnungen">
                    Senioren-wohnungen
                    <div class="naranja"></div>
                </a>
            </li>
            <li>
                <a href="#" class="Burgerheim">
                    Burgerheim
                    <div class="amarillo"></div>
                </a>
            </li>
            <li>
                <a href="#" class="Schüür">
                    Schüür
                    <div class="violeta"></div>
                </a>
            </li>
            <li>
                <a href="#" class="Forst">
                    Forst
                    <div class="verde"></div>
                </a>
            </li>
        </ul>
    </div>
</div>

http://jsfiddle.net/qQ39J/1/ css代码在里面

我的问题是：为什么在 Safari 中有效，而在 Firefox 中无效？任何人都可以帮忙吗？也许我没有写正确的代码。这太难了。

【问题讨论】：

标签： css hover overflow css-position transition

【解决方案1】：

这是一个在 firefox 中运行的 JS fiddle 演示。

fiddle

通过它可能会帮助您进行过渡。

这是css

#main
{
height:200px;
width:200px;
background-color:red;
-webkit-transition: height 0.9s ease-in-out;
-moz-transition: height 0.9s ease-in-out;
-ms-transition: height 0.9s ease-in-out;
-o-transition: height 0.9s ease-in-out;
transition: height 0.9s ease-in-out;
}

#main:hover
{
height:300px;    
}

这是 css，它会为 div 设置动画。

<div id="main"></div>

检查，如果您无法获得成功的结果，请告诉我。生病开始在小提琴中编辑你的答案:)

【讨论】：

需要垂直动画。你的是向下动画。