css – -webkit转换与显示

有没有办法使用-webkit转换与显示？

我使用CSS显示来隐藏和显示导航第二级…但只显示：none和显示：阻止：hover是一个有点不性感…一个轻松将是伟大的(如-webkit转换：显示300ms ease-在;)

我知道这是很容易做到这一点与jQuery，但我目前正试图用CSS3设置一切(我知道：并不是所有的浏览器都支持它，但这对我目前正在处理的这个项目是无关紧要的)

这里有一些代码&结构：(li.menu1有：hover with section.nav-menu1 {display：block;})

<ul>
    <li class="menu1"><a href="#">Menu 1</a>
        <section class="nav-menu1">
            <h1 class="none">Level 2 Overlay</h1>
            <nav>
                <h2 class="none">Menu 1 Navigation</h2>
                <ul>
                    <li><a href="#">Menu 1 Level 2-1</a></li>
                    <li><a href="#">Menu 1 Level 2-2</a></li>
                    <li><a href="#">Menu 1 Level 2-3</a></li>
                </ul>
            </nav>
        </section>
    </li>
</ul>

解决方法

您应该使用高度或宽度转换来显示和隐藏二级菜单。转换不支持显示属性。

有一篇文章在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.可能我的结构有问题。问题是转换不适用于自动，因此您必须手动指定最终高度。

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

Example。