Question

有没有办法将-webkit-transition与display一起使用？

我正在使用CSS display来隐藏和显示第二级导航......但display: none上只有display: block和:hover有点不性感... a { {1}}会很棒（例如ease）

我知道使用jQuery很容易做到这一点，但我现在正在尝试使用CSS3设置所有内容（我知道：并非所有浏览器都支持它，但这与我目前正在处理的这个项目无关）

这里是一些代码＆amp;结构:( -webkit-transition: display 300ms ease-in;有li.menu1 :hover）

section.nav-menu1 {display: block;}

Answer 1

所以我不确定我看到所有的碎片放在这里。您希望为不透明度和可见性设置动画，可见性具有延迟，因此在触发之前完成不透明度;

opacity: 0;
-moz-transition: opacity .25s linear, visibility .1s linear .5s;
-webkit-transition: opacity .25s linear, visibility .1s linear .5s;
-o-transition: opacity .25s linear, visibility .1s linear .5s;
transition: opacity .25s linear, visibility .1s linear .5s;
visibility: hidden;

到

opacity: 1;
visibility: visible;

可见性将等待.5s然后切换到隐藏。如果您希望它可以双向淡化，您甚至可以关闭一侧的可见性转换。（因此，当淡入时，元素立即可见，而不是等待.5s并转换。）

Answer 2

您应该使用height或width转换来显示和隐藏第二级菜单。转换不支持Display属性。

ODC上有一篇文章，something similar符合您的需求。另外，我modified it a bit为了看起来更像菜单项。适用于Opera 10.7，在Firefox 3.6.12中没有转换，在Chrome 7.0.517.41中完全没有。

我希望这对您自己的动画菜单起点很有用。

更新1： Your menu with ease-in transitions。可能，我对它的结构有些不对劲。问题是转换不适用于auto，因此您必须手动指定最终高度。

更新2： 使用不透明度作为过渡属性。在不可见元素集可见性：隐藏和可见性：可见时可见。这将防止不可见的可点击链接。此外，可见不可见的过渡不起作用，不知道为什么。必须更多地工作。

Example

Answer 3

您应该使用不透明度过渡，而不是显示过渡。显示：none完全从布局中删除元素 - 我想你想要它，但看不见。

Answer 4

使用overflow:hidden > overflow:visible，效果更好，我这样使用：

example {
 #menu ul li ul {

    background-color:#fe1c1c;
    width:85px;
    height:0px;
    opacity:0;
    box-shadow:1px 3px 10px #000000;
    border-radius:3px;
    z-index:1;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.6s ease;

}

 #menu ul li:hover ul  {

        overflow:visible;
    opacity:1;
    height:140px;
}

优于可见，因为overflow:hidden的行为与display:none完全相同，

-webkit-transition with display

4 个答案: