Question

我真正想要的是通过菜单在www.ditto.com的网站上产生相同的效果，如果有人能够弄清楚，那将是非常好的，但如果不是这就是我拥有的并且请取悦任何人都可以回答这个问题，我正在为某人建立一个网站，我需要快速获取这些信息!!

此代码在上升时会等待0.8秒，但是当它下降时它不会等待，它会弹出。

提前致谢!!

您可以在此处查看完整代码：http://jsfiddle.net/zZPPR/

CSS

         .one
            {
                max-height: 0;
                overflow: hidden;
                -webkit-transition: max-height 0.8s;
            }
            .two
            {
                max-height: 200px;
                 overflow:visible;
            }

Answer 1

发生的事情是您没有转换overflow财产。因此，只要应用了类two，就会将溢出设置为可见，并立即显示内容。

Answer 2

这是一个针对链接中第二个动画的解决方案。虽然还是草案。

http://jsfiddle.net/NicoO/T4Nbk/5/

更新：最大高度导致速度问题，使感觉转变太快或太慢。以下是使用转换的替代解决方案：http://jsfiddle.net/NicoO/T4Nbk/7/与Chrome供应商前缀相同的版本：http://jsfiddle.net/T4Nbk/9/

CSS：

ul
{
    margin: 0;
    padding: 0;
}

ul > li 
{
    display: inline-block;
    position: relative;
}

ul > li li
{
    display: block;
}

ul > li:before
{
    background-color:gray;
    top: 100%;
    bottom:0;
    left: 0;
    right: 0;
    position: absolute;
    content: "";
    transition-duration: 0.4s;
    z-index:-1;
}

ul > li a
{
    display: block;
    position: relative;
}
ul > li ul
{
    max-height: 0;
    overflow: hidden;
    position: absolute;
    left:0;
    width: 300px;
    background-color: gray;
    transition-duration: 0.4s;
    transition-property: max-height;
}

ul > li:hover:before
{
    top:0;
}

ul > li:hover ul
{
    max-height: 400px;
}

HTML：

   <nav>
        <ul>
            <li>Home</li>
            <li>News & Events</li>
            <li>
                Discover
                <ul>
                    <li>Jordan</li>
                    <li>Jordan</li>

                </ul>
            </li>
        </ul>
    </nav>

使用转换的解决方案的CSS：灵感来自：How can I transition height: 0; to height: auto; using CSS?

ul
{
    margin: 0;
    padding: 0;
}

ul > li 
{
    display: inline-block;
    position: relative;
}

ul > li li
{
    display: block;
}

ul > li:before
{
    background-color:gray;
    top: 100%;
    bottom:0;
    left: 0;
    right: 0;
    position: absolute;
    content: "";
    transition-duration: 0.4s;
    z-index:-1;
}

ul > li a
{
    display: block;
    position: relative;
}
ul > li ul
{
    transform: scaleY(0);
    transition: transform 0.4s;
    transform-origin: top;
    overflow: hidden;
    position: absolute;
    left:0;
    width: 300px;
    background-color: gray;
}

ul > li:hover:before
{
    top:0;
}

ul > li:hover ul
{
    transform: scaleY(1);
}

Answer 3

从班级overflow:visible中删除.two，它会正常工作

JSFIDDLE

Answer 4

你应该删除overflow：visible;

CSS中菜单栏的动画高度

4 个答案: