-webkit转换与显示 [英] -webkit-transition with display

问题描述

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

我使用CSS display 隐藏和显示导航第二级...但只有 display：none 和显示：block 在：hover 是一个有点不性感... a 缓解会很棒（如 -webkit-transition：display 300ms ease-in; ）

我知道这是相当容易做到这一点与jQuery，但我目前正在尝试使用CSS3设置一切（我知道：并不是所有的浏览器都支持它，但这是不相关的这个项目，我目前工作）

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

 < ul> 
< li class =menu1>< a href =＃>菜单1< / a> 
< section class =nav-menu1> 
< h1 class =none> 2级叠加层< / h1> 
< nav> 
< h2 class =none>菜单1导航< / h2> 
< ul> 
< li>< a href =＃>菜单1第2-1级< / a>< / li> 
< li>< a href =＃>菜单1第2-2级< / a>< / li> 
< li>< a href =＃>菜单1第2-3级< / a>< / li> 
< / ul> 
< / nav> 
< / section> 
< / li> 
< / ul> 
  

解决方案

/ code>或 width 转换以显示和隐藏二级菜单。 显示属性不受转换支持。

ODC 与类似于你的需要。此外，我已修改了一点，为了看起来更像菜单项。在Opera 10.7中工作完美，在Firefox 3.6.12中没有转换，在Chrome 7.0.517.41中完全不显示。

我希望这将作为起点

您的菜单带有轻松过渡。也许，我有一个错误的结构。问题是转换不能用 auto ，所以你必须手动指定最终高度。

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

示例。

Is there a way to use -webkit-transition with display?

I'm using CSS display to hide and show a navigations second level … but only display: none and display: block on :hover is a little un-sexy… a ease would be great (like -webkit-transition: display 300ms ease-in;)

I know that's fairly easy to do this with jQuery, but I'm currently trying to setup everything with CSS3 (i know: not all browsers do support it, but that's irrelevant for this one project I'm currently working on)

here's some code & structure: (the li.menu1 has a :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>

解决方案

You should use height or width transition in order to show and hide second level menu. Display property is not supported by transitions.

There is an article at ODC with something similar to your needs. Also, I've modified it a bit in order to look more like menu item. Works perfect in Opera 10.7, without transitions in Firefox 3.6.12 and doesn't at all in Chrome 7.0.517.41.

I hope this will be useful as start point for your own animated menu.

Update 1: Your menu with ease-in transitions. Probably, I've got something wrong about it's structure. The problem is that transitions do not work with auto, so you have to manually specify final height.

Update 2: Use opacity as transition property. On invisible element set visibility:hidden and visibility:visible on visible. That will prevent from invisible clickable links. Also, visible-invisible transition doesn't work, don't know why. Have to work more om it.

Example.

这篇关于-webkit转换与显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！