-Webkit-Transition带有显示

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

您应该使用 height 或者 width 过渡以显示和隐藏第二层菜单。 Display 过渡不支持财产。

有一篇文章 ODC 和 相似的东西 满足您的需求。另外，我 修改了一点 为了看起来更像菜单项。 Opera 10.7的完美作品，在Firefox 3.6.12中没有过渡，并且在Chrome 7.0.517.41中根本没有。

我希望这将作为您自己的动画菜单的起点有用。

更新1： 您的菜单带有轻松的过渡. 。可能，我的结构有问题。问题是过渡不适合 auto, ，因此您必须手动指定最终高度。

更新2：使用不透明度作为过渡属性。在隐形元素上可见性：隐藏和可见性：可见可见。这将阻止可见的可单击链接。另外，可见的不可接受的过渡不起作用，不知道为什么。必须更多地工作。

例子.

Answer 2

因此，我不确定我看到所有的作品都放在这里。您想使不透明度和可见性动画，可见度具有延迟，因此在触发它之前就完成了不透明度；

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 3

您应该使用不透明度过渡，而不是为此的显示过渡。显示：没有一个完全从布局中删除元素 - 我认为您想要它，但是看不见。

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,