CSS -webkit-transition 带显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4178567/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
-webkit-transition with display
提问by albuvee
Is there a way to use -webkit-transitionwith display?
有没有办法使用的方式-webkit-transition有display？
I'm using CSS displayto hide and show a navigations second level …?but only display: noneand display: blockon :hoveris a little un-sexy… a easewould be great (like -webkit-transition: display 300ms ease-in;)
我使用CSSdisplay来隐藏和显示导航二级...？但只能display: none和display: block上:hover是一个小联合国，性感...一个ease将是巨大的（像-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)
我知道使用 jQuery 很容易做到这一点，但我目前正在尝试使用 CSS3 设置所有内容（我知道：并非所有浏览器都支持它，但这与我目前正在开展的这个项目无关）
here's some code & structure: (the li.menu1has a :hoverwith section.nav-menu1 {display: block;})
这是一些代码和结构：（li.menu1有一个:hoverwith 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>
采纳答案by Klaster_1
You should use heightor widthtransition in order to show and hide second level menu. Displayproperty is not supported by transitions.
您应该使用height或widthtransition 来显示和隐藏二级菜单。Display转换不支持属性。
There is an article at ODCwith something similarto your needs. Also, I've modified it a bitin 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.
ODC 上有一篇文章与您的需求类似。此外，为了看起来更像菜单项，我对其进行了一些修改。在 Opera 10.7 中完美运行，在 Firefox 3.6.12 中没有转换，在 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.
更新 1：您的菜单具有轻松过渡。也许，我对它的结构有什么误解。问题是过渡不适用于auto，因此您必须手动指定最终高度。
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.
更新 2：使用不透明度作为过渡属性。在不可见元素上设置可见性：隐藏和可见性：可见时可见。这将防止不可见的可点击链接。此外，可见 - 不可见过渡不起作用，不知道为什么。必须更多地工作。
例子。
回答by Bob Spryn
So I'm not sure I see all the pieces put together here. You want to animate opacity and visibility, with visibility having a delay so opacity is done before it triggers;
所以我不确定我是否看到所有的部分都放在一起。您想要为不透明度和可见性设置动画，可见性具有延迟，因此不透明度在触发之前完成；
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;
to
到
opacity: 1;
visibility: visible;
visibility will wait .5s and then switch over to hidden. You can even turn off the visibility transition on one side if you want it to fade both ways. (So that when fading in, the element is instantly visible instead of waiting .5s and transitioning.)
可见性将等待 0.5 秒，然后切换到隐藏。如果您希望它以两种方式淡入淡出，您甚至可以关闭一侧的可见性过渡。（这样当淡入时，元素立即可见，而不是等待 0.5 秒和过渡。）
回答by Michael Mullany
You should use an opacity transition, not a display transition for this. Display:none removes an element from the layout entirely - I think you want it there, but invisible.
您应该为此使用不透明度过渡，而不是显示过渡。Display:none 从布局中完全删除一个元素 - 我想你想要它在那里，但不可见。
回答by jesus
Use overflow:hidden > overflow:visible, works better, I use like this:
使用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;
}
is better than visible because overflow:hiddenact exactly like a display:none,
比可见更好，因为overflow:hidden行为完全像一个display:none，
