-webkit-transition 带显示

Posted 2023-03-06

【中文标题】-webkit-transition 带显示

【英文标题】：-webkit-transition with display

【发布时间】：2011-05-09 21:05:00

【问题描述】：

有没有办法将-webkit-transition 与display 一起使用？

我正在使用 CSS display 来隐藏和显示第二级导航……但只有 :hover 上的 display: none 和 display: block 有点不性感……ease 会很棒（比如 @ 987654328@)

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

【问题讨论】：

你能显示导航结构吗？甚至是例子。

【参考方案1】：

您应该为此使用不透明过渡，而不是显示过渡。 Display:none 完全从布局中删除一个元素 - 我认为您希望它在那里，但不可见。

【讨论】：

hmm，如果我使用不透明度，则 :hover 存在重大问题（因为元素存在但不可见，因此 :hover'able/clickable）：-/

【参考方案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： 使用不透明度作为过渡属性。在不可见元素上设置可见性：隐藏和可见性：可见上可见。这将防止不可见的可点击链接。另外，可见-不可见过渡不起作用，不知道为什么。必须加倍努力。

Example.

【讨论】：

是的！谢谢！ ……隐藏： 和可见： ...谢谢！

唯一有效的关键字是颜色。不幸的是，中心、左、右、自动等没有转换（但是，我会添加）。

淡入很好，但不幸的是淡入 out 不适用于此。

如果您想同时淡出和淡入，您可以使用此要点中的解决方法：gist.github.com/2933815

应该注意的是，如果您希望它在 ios 设备上运行，据我所知 必须 使用 display: block;并显示：无；隐藏，这有点令人沮丧。当需要动画和平板电脑/手机支持时，可能是 jQuery 或类似的解决方案提供了最强大的解决方案。

【参考方案3】：

所以我不确定我是否在这里看到了所有的部分。您想要动画不透明度和可见性，可见性有延迟，因此不透明度在触发之前完成；

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 秒和过渡。）

【参考方案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 完全一样，

【讨论】：

首先：请更正您的代码，它无效。第二：不支持溢出作为过渡。