-webkit-transition with display

Question

有没有办法使用的方式-webkit-transition有display？

我使用CSS display来隐藏和显示导航二级...但只display: none和display: block上:hover是一个小联合国性感......一个ease将是巨大的(像-webkit-transition: display 300ms ease-in;)

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

这里是一些代码和结构:( li.menu1有一个:hover与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>

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上有一篇文章,内容类似于您的需求.此外,我已经修改了一下,以便看起来更像菜单项.适用于Opera 10.7,在Firefox 3.6.12中没有转换,在Chrome 7.0.517.41中完全没有.

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

更新1: 您的菜单具有轻松过渡.可能,我对它的结构有些不对劲.问题是转换不起作用auto,因此您必须手动指定最终高度.

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

例子.