-webkit-带显示的过渡

Question

有没有办法在display中使用-webkit-transition

我正在使用CSS display隐藏和显示导航二级…。但只有:hover上的display: none和display: block才是一点不性感的…像-webkit-transition: display 300ms ease-in;这样的ease就更好了。

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

下面是一些代码和结构：( li.menu1有一个带有section.nav-menu1 {display: block;}的:hover )

<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>

Answer 1

您应该使用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:使用不透明度作为过渡属性。在不可见元素上设置visibility:hidden和visibility:visible On visible。这将防止不可见的可点击链接。另外，可见-不可见转换不起作用，不知道为什么。还得多下功夫。

Example。

Answer 2

所以我不确定我在这里看到了所有的碎片。你想要动画的不透明度和可见性，可见性有一个延迟，所以不透明度是在它触发之前完成的；

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;

visibility将等待.5s，然后切换到隐藏。您甚至可以关闭一侧的可见性过渡，如果您希望它在两个方向上淡入淡出。(因此，当淡入时，元素立即可见，而不是等待.5s和过渡。)

Answer 3

为此，您应该使用不透明过渡，而不是显示过渡。显示:无将一个元素从布局中完全移除-我认为你希望它在那里，但不可见。