-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.
这篇关于-webkit转换与显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!