CSS3隐藏过渡

我有一个菜单，其悬停时的高度和可视性转换，并在没有悬停时转换回来。 它工作正常，但链接在淡出时隐藏起来。 我一直在寻找，我无法弄清楚如何防止它们彼此崩溃。 所以我的问题是，我怎么阻止它这样做呢？ 这只是我忽略的一些简单的解决方案，还是更复杂的东西？

HTML

<header>
<section id="logo_section">
    <h1><a href="#">FLASH OF REALITY</a></h1>
    <p>Photography, Film, & Animation in Utah</p>
</section>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Photography</a></li>
        <li><a href="#">Video</a></li>
        <li><a href="#">Animation</a></li>
        <li><a href="#">My Portfolio</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About Me</a></li>
    /ul>
</nav>
</header>

CSS

header ul li {
visibility: hidden;
height: 0px;
transition: visibility .5s, height .5s;
}

header:hover ul li {
visibility: visible;
height: 57px;
}

---

当你转换<li>项目的高度时，它们将逐渐变为0，因此它们将全部坐在彼此的顶部，因为它们没有高度。

您可以将<ul>的最大高度从0转换为比列表要高的值，而不是转换<li> 。

header ul {
  max-height: 0;
  transition: max-height .5s;
  overflow: hidden;
}

header:hover ul {
  max-height: 600px;
}

http://jsfiddle.net/4CfeU/2/

链接地址: http://www.djcxy.com/p/27419.html

上一篇: CSS3 hiding transition

下一篇: Using CSS to transition the fill property of an SVG path on hover