CSS3过渡滑动元素

Question

我正在尝试重新创建在第二次世界大战电影网站上发现的类似菜单效果,但我似乎无法使CSS过渡正常工作.我已经得到了悬停元素来显示隐藏的块,但CSS转换不起作用.我试图获得一个从顶部或底部滑动的很酷的效果,我没有特定的偏好.此外,如果我尝试查看任何链接,子菜单会在我点击它之前消失.这是小提琴.

HTML:

    <ul id="menutitle">Menu Title</ul>
        <ul id="submenu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
        </ul>
</nav>

CSS:

#topmenu {
    background: #000; 
    width: 150px;
    height: 50px;
    color: #fff; 
}

#submenu {
    display: block;
    position: absolute;
    width: 110px;
    display: none;
    background: #333;
    list-style: none;
    line-height: 2em; 
}

#menutitle:hover + #submenu {
     display: block; 
    -webkit-transition: height 1s ease;
    -moz-transition: ease-in 2s none;
    -ms-transition: ease-in  2s none;
    -o-transition: ease-in  2s none;
    transition: ease-in  2s none;  
}

#menutitle { color: #ff0000; }

a { color: #FF0; }

Answer 1

一些东西:

您的:hover选择器应位于#topmenu元素上,而不是标题上.这就是导航区域如此突然消失的原因 - 它只需要悬停在菜单文本上.

您可能对animate属性定义有一点误解.你需要选择一个特定的属性来制作动画; 通常像'身高'.在这种情况下,我的解决方案是设置"max-height".可能有某种方法可以将高度设置为"自动",但如果是这样,它就会丢失在我身上.

此外,"过渡"属性始终在对象上设置 - 而不仅仅是"悬停时".它是一种常量状态,表示"当这个属性发生变化时,进行平滑过渡".这样,你可以有一系列不同的状态给出不同的高度.

http://jsfiddle.net/8YHbq/4/

#topmenu {background: #000; width: 150px; height: 50px; color: #fff; }

#submenu {display: block;
position: absolute;
width: 110px;
background: #333;
list-style: none;
line-height: 2em;
overflow: hidden;
    max-height:0;
    transition: max-height 0.7s ease-in; 
}

#topmenu:hover #submenu {
max-height: 200px;}

#menutitle {color: #ff0000;}
a {color: #FF0}

目前,我刚刚意识到的我的版本的一个问题是,由于最大高度设置为200px,导航菜单将在达到200之前完全展开 - 使动画不太流畅.也许你可以根据自己的需要调整一下.