使用display属性的-webkit-transition

Question

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

我正在使用CSS的display属性来隐藏和显示导航菜单的二级目录...但只有在:hover时切换display: none和display: block感觉有点不够美观，希望像这样添加一个ease效果：-webkit-transition: display 300ms ease-in;

我知道可以用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>

- albuvee

---

你能展示一下导航结构吗？或者给个例子。 - Klaster_1 Нет войне

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;

可见性会等待0.5秒，然后切换到隐藏。如果您想要双向淡入淡出效果，甚至可以关闭其中一侧的可见性过渡。（因此，在淡入时，元素立即可见而不是等待0.5秒并过渡。）

- Bob Spryn

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：使用不透明度作为过渡属性。在不可见元素上设置visibility:hidden，并在可见元素上设置visibility:visible。这将防止不可见的可点击链接。另外，可见-不可见转换不起作用，不知道为什么。还需要更多的工作。 Example。

- Klaster_1 Нет войне

---

耶！谢谢！在隐藏状态下：<visibility:hidden; opacity: 0; -XY-transition: opacity 150ms ease-in;>，在可见状态下：<visibility: visible; opacity: 1; overflow: hidden;>。谢谢！ - albuvee

唯一起作用的关键字是颜色。不幸的是，居中、左对齐、右对齐、自动等关键字尚未过渡（但我会添加）。 - fregante

淡入效果很好，但不幸的是，这个淡出效果无法实现。 - alirobe

如果您想要淡入淡出效果，可以使用此Gist中的解决方法：https://gist.github.com/2933815 - Claude

请注意，如果你希望在iOS设备上运行这个程序，据我所知它必须使用display:block; 和 display:none;来隐藏，这有点令人沮丧。当需要动画和平板电脑/手机支持时，jQuery或类似的工具可能提供最强大的解决方案。 - Mike

Answer 3

你应该使用不透明度过渡，而不是显示过渡。 display: none会完全从布局中移除元素 - 我想你希望它在那里，只是看不见。

- Michael Mullany

---

如果我使用不透明度，:hover会出现重大问题（因为元素存在但是不可见，所以:hover无法生效/可点击）:-/ - albuvee

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更好，因为它的作用完全相同。

- jesus

---

第一句：请先修正您的代码，它是无效的。 第二句：溢出不被支持作为转换。 - Mark