我正在尝试使用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%演示过渡高度：添加子对象时自动
没有最大高度，使用相对定位，在li元素上工作，并且是纯CSS：
除了Firefox，我没有在其他任何地方进行过测试，尽管从CSS来看，它应该可以在所有浏览器上运行。
小提琴：http://jsfiddle.net/n5XfG/2596/
CSS
.wrap { overflow:hidden; }
.inner {
margin-top:-100%;
-webkit-transition:margin-top 500ms;
transition:margin-top 500ms;
}
.inner.open { margin-top:0px; }
HTML
<div class="wrap">
<div class="inner">Some Cool Content</div>
</div>
我没有详细阅读所有内容，但我最近遇到了这个问题，我采取了以下措施：
div.class{
min-height:1%;
max-height:200px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
overflow:hidden;
}
div.class:hover{
min-height:100%;
max-height:3000px;
}
这允许你有一个div，它首先显示高达200px的内容，悬停时它的大小至少与div的整个内容一样高。div不会变成3000px，但3000px是我强加的限制。确保在非：悬停上进行转换，否则可能会出现一些奇怪的渲染。这样：hover继承自非：hover。
从px到%或自动转换不起作用。您需要使用相同的度量单位。
每当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%演示过渡高度：添加子对象时自动
