我正在尝试使用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>


当前回答

每当DOM发生变化时,为跟踪的元素设置style=“”属性。名为变种转换的插件您可以使用CSS进行转换,而不使用黑客。您不必编写任何JavaScript。只需包含JavaScript库并指定要在HTML中查看的属性。你不必使用固定高度的CSS。使用data mutant attributes=“X”设置要跟踪的元素。

<div data-mutant-attributes="height">                                                                      
    This is an example with mutant-transition                                                                                                          
</div>

这使用MutationObserver跟踪DOM中的更改。您不必设置任何内容或使用JavaScript手动设置动画。更改将自动跟踪。然而,由于它使用了MutationObserver,这只会在IE11+中转换。<IE11将看到快照更改(无过渡)。

小提琴手

演示从高度:自动转换到高度:100%演示过渡高度:添加子对象时自动

其他回答

将高度设置为自动并转换最大高度。

在Chrome v17上测试

div {
  position: absolute;
  width:100%;
  bottom:0px;
  left:0px;

  background:#333;
  color: #FFF;

  max-height:100%; /**/
  height:auto; /**/

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.close {
  max-height:0%; /**/
}

杰克对最大高度动画化的回答很好,但我发现设置大的最大高度所导致的延迟很烦人。

可以将可折叠内容移动到内部div中,并通过获取内部div的高度来计算最大高度(通过JQuery,它将是outerHeight())。

$('button').bind('click', function(e) { 
  e.preventDefault();
  w = $('#outer');
  if (w.hasClass('collapsed')) {
    w.css({ "max-height": $('#inner').outerHeight() + 'px' });
  } else {
    w.css({ "max-height": "0px" });
  }
  w.toggleClass('collapsed');
});

这里有一个jsfiddle链接:http://jsfiddle.net/pbatey/duZpT

这里有一个jsfiddle,它提供了所需的绝对最小代码量:http://jsfiddle.net/8ncjjxh8/

我能够做到这一点。我有一个.child和一个.parent div。子div完全符合父div的宽度/高度,具有绝对定位。然后设置平移属性的动画,将其Y值降低100%。它的动画非常流畅,没有任何问题或缺点,就像这里的任何其他解决方案一样。

类似这样,伪代码

.parent{ position:relative; overflow:hidden; } 
/** shown state */
.child {
  position:absolute;top:0;:left:0;right:0;bottom:0;
  height: 100%;
  transition: transform @overlay-animation-duration ease-in-out;
  .translate(0, 0);
}

/** Animate to hidden by sliding down: */
.child.slidedown {
  .translate(0, 100%); /** Translate the element "out" the bottom of it's .scene container "mask" so its hidden */
}

您可以在.parent上指定一个高度,单位为px,%,或保留为auto。这个div然后在向下滑动时屏蔽掉.child div。

扩展@jake的答案,过渡将一直到最大高度值,从而产生极快的动画效果-如果您同时设置了悬停和关闭两种过渡,则可以进一步控制疯狂的速度。

因此,li:hover是指鼠标进入状态,然后非悬停属性上的转换将是鼠标离开。

希望这会有所帮助。

例如:

.sidemenu li ul {
   max-height: 0px;
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -o-transition: all .3s ease;
   -ms-transition: all .3s ease;
   transition: all .3s ease;
}
.sidemenu li:hover ul {
    max-height: 500px;
    -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease;
}
/* Adjust speeds to the possible height of the list */

这是一把小提琴:http://jsfiddle.net/BukwJ/

这并不是问题的“解决方案”,而是一种变通方法。它只在用文本编写时有效,但可以根据需要更改为使用其他元素。

.originalContent {
    font-size:0px;
    transition:font-size .2s ease-in-out;
}
.show { /* class to add to content */
    font-size:14px;
}

下面是一个示例:http://codepen.io/overthemike/pen/wzjRKa

本质上,您将字体大小设置为0,并以足够快的速度将其转换为所需的高度,而不是高度、最大高度或scaleY()等。用CSS将实际高度转换为auto目前是不可能的,但转换内容是可能的,因此字体大小转换。

注意-代码笔中有javascript,但它的唯一目的是在手风琴上单击时添加/删除css类。这可以通过隐藏的单选按钮来完成,但我并没有专注于此,只是高度转换。