我正在尝试使用CSS转换制作一个<ul>幻灯片。

<ul>开始于高度:0;。悬停时,高度设置为height:auto;。然而,这导致它简单地出现,

如果我从高度做:40px;至高度:自动;,那么它将向上滑动到高度:0;,然后突然跳到正确的高度。

如果不使用JavaScript,我怎么能做到这一点?

#子0{高度:0;溢出:隐藏;背景色:#dedede;-moz过渡:高度1s容易;-webkit过渡:高度1s轻松;-o过渡:高度1s容易;过渡:高度1s;}#parent0:悬停#child0{高度:自动;}#孩子40{高度:40px;溢出:隐藏;背景色:#dedede;-moz过渡:高度1s容易;-webkit过渡:高度1s轻松;-o过渡:高度1s容易;过渡:高度1s;}#parent40:悬停#child40{高度:自动;}h1小时{字号:粗体;}两个CSS片段之间的唯一区别是一个高度为0,另一个高度是40。<小时><div id=“parent0”><h1>将我悬停(高度:0)</h1><div id=“child0”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div><小时><div id=“parent40”><h1>将我悬停(高度:40)</h1><div id=“child40”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div>


当前回答

使用CSS3过渡设置高度动画的一个视觉解决方法是设置填充动画。

你不太能得到完全的擦除效果,但在过渡持续时间和填充值之间进行切换应该会让你足够接近。如果您不想显式设置高度/最大高度,这应该是您想要的。

div {
    height: 0;
    overflow: hidden;
    padding: 0 18px;
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;
}
div.animated {
    height: auto;
    padding: 24px 18px;
}

http://jsfiddle.net/catharsis/n5XfG/17/(从jsFiddle上方的stephband上重复)

其他回答

我一直使用的解决方案是先淡出,然后缩小字体大小、填充和边距值。它看起来不像擦拭器,但它没有静态高度或最大高度。

工作示例:

/*最终显示器*/#菜单#列表{边距:.5em 1em;填充:1em;}/*隐藏,隐藏*/#menu:not(:hover)#列表{字体大小:0;边距:0;不透明度:0;填充:0;/*淡出,然后收缩*/过渡:不透明度.25s,字体大小.5s.25s,余量.5s.25s,填充.5s.25s;}/*显示*/#菜单:悬停#列表{/*取消闪烁,然后淡入*/过渡:字体大小.25s,边距.25s,填充.25s,不透明度.5s.25s;}<div id=“menu”><b>悬停我</b><ul id=“list”><li>项目</li><li>项目</li><li>项目</li><li>项目</li><li>项目</li></ul></div><p>另一段</p>

我只是为<li>元素设置动画,而不是为整个容器设置动画:

<style>
.menu {
    border: solid;
}
.menu ul li {
    height: 0px;
    transition: height 0.3s;
    overflow: hidden;
}
button:hover ~ .wrapper .menu ul li,
button:focus ~ .wrapper .menu ul li,
.menu:hover ul li {
    height: 20px;
}
</style>


<button>Button</button>
<div class="wrapper">
    <div class="menu">
        <ul>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
        </ul>
    </div>
</div>

您可以添加ul:margin 0;高度为0。

Jake的最大高度解决方案效果很好,如果硬编码提供的最大高度值不比实际高度大多少(因为否则会出现不期望的延迟和定时问题)。另一方面,如果硬编码值意外为不大于实际高度,元件将不会完全打开。

以下仅限CSS的解决方案还需要硬编码大小应大于大多数实际尺寸。然而,这如果实际大小在某些情况下大于硬编码大小。在这种情况下,转换可能会跳一点,但它永远不会留下部分可见的元素。因此,该解决方案也可用于未知内容,例如数据库,您只需知道内容通常不会更大超过x像素,但也有例外。

想法是使用负值作为边距底部(或边距顶部用于稍微不同的动画),并将内容元素放置到带溢出的中间元素:隐藏。内容的负边距因此减小了中间元件的高度。

以下代码使用边距底部从-150px到0倍。只要内容元素不是高于150px。此外,它使用最大高度上的过渡中间元素从0px到100%。这最终隐藏了中间元素如果内容元素高于150px。对于最大高度,过渡仅用于延迟其应用关闭时一秒钟,而不是为了平滑的视觉效果(因此它可以从0px运行到100%)。

CSS:

.content {
  transition: margin-bottom 1s ease-in;
  margin-bottom: -150px;
}
.outer:hover .middle .content {
  transition: margin-bottom 1s ease-out;
  margin-bottom: 0px
}
.middle {
  overflow: hidden;
  transition: max-height .1s ease 1s;
  max-height: 0px
}
.outer:hover .middle {
  transition: max-height .1s ease 0s;
  max-height: 100%
}

HTML格式:

<div class="outer">
  <div class="middle">
    <div class="content">
      Sample Text
      <br> Sample Text
      <br> Sample Text
      <div style="height:150px">Sample Test of height 150px</div>
      Sample Text
    </div>
  </div>
  Hover Here
</div>

边距底部的值应为负值,并尽可能接近可能达到内容元素的实际高度。如果是绝对的值)越大,则存在与最大高度解决方案,但只要硬编码的大小并不比实际大小大多少。如果绝对值边距底部的值小于变换有点跳跃。在任何情况下,过渡后内容元素被完全显示或完全移除。

有关详细信息,请参阅我的博客文章http://www.taccgl.org/blog/css_transition_display.html#combined_height

下面是我刚刚与jQuery结合使用的解决方案。这适用于以下HTML结构:

<nav id="main-nav">
    <ul>
        <li>
            <a class="main-link" href="yourlink.html">Link</a>
            <ul>
                <li><a href="yourlink.html">Sub Link</a></li>
            </ul>
        </li>
    </ul>
</nav>

以及功能:

    $('#main-nav li ul').each(function(){
        $me = $(this);

        //Count the number of li elements in this UL
        var liCount = $me.find('li').size(),
        //Multiply the liCount by the height + the margin on each li
            ulHeight = liCount * 28;

        //Store height in the data-height attribute in the UL
        $me.attr("data-height", ulHeight);
    });

然后,您可以使用click函数使用css()设置和删除高度

$('#main-nav li a.main-link').click(function(){
    //Collapse all submenus back to 0
    $('#main-nav li ul').removeAttr('style');

    $(this).parent().addClass('current');

    //Set height on current submenu to it's height
    var $currentUl = $('li.current ul'),
        currentUlHeight = $currentUl.attr('data-height');
})

CSS:

#main-nav li ul { 
    height: 0;
    position: relative;
    overflow: hidden;
    opacity: 0; 
    filter: alpha(opacity=0); 
    -ms-filter: "alpha(opacity=0)";
    -khtml-opacity: 0; 
    -moz-opacity: 0;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}

#main-nav li.current ul {
    opacity: 1.0; 
    filter: alpha(opacity=100); 
    -ms-filter: "alpha(opacity=100)";
    -khtml-opacity: 1.0; 
    -moz-opacity: 1.0;
}

.ie #main-nav li.current ul { height: auto !important }

#main-nav li { height: 25px; display: block; margin-bottom: 3px }

Flexbox解决方案

赞成的意见:

易于理解的无JS平滑过渡

欺骗:

元素需要放在固定高度的柔性容器中

它的工作方式是始终具有灵活的基础:在元素上自动添加内容,并转换为灵活增长和灵活收缩。

编辑:受Xbox One界面启发,改进了JS Fiddle。

* {边距:0;填充:0;框大小调整:边框框;过渡:0.25s;字体系列:单空间;}正文{边距:10px 0 0 10px;}.box格式{宽度:150px;高度:150px;边距:0 2px 10px 0;背景:#2d333b;边框:实心10px#20262e;溢出:隐藏;显示:内联flex;弯曲方向:柱;}.空格{弹性基础:100%;挠曲生长:1;挠曲收缩:0;}p型{弹性基础:自动;柔性增长:0;挠曲收缩:1;背景:#20262e;填充:10px;宽度:100%;文本对齐:左侧;颜色:白色;}.box:悬停.space{柔性增长:0;挠曲收缩:1;}.box:悬停p{挠曲生长:1;挠曲收缩:0;}<div class=“box”><div class=“space”></div><p>超级Metroid Prime Fusion</p></div><div class=“box”><div class=“space”></div><p>《生化危机2》翻拍</p></div><div class=“box”><div class=“space”></div><p>Yolo游戏</p></div><div class=“box”><div class=“space”></div><p>《最终幻想7》重制版+所有附加DLC+金色礼帽</p></div><div class=“box”><div class=“space”></div><p>德普维尔</p></div>

JS小提琴