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

.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类。这可以通过隐藏的单选按钮来完成，但我并没有专注于此，只是高度转换。

对于每个状态，使用具有不同过渡缓和和延迟的最大高度。

HTML格式：

<a href="#" id="trigger">Hover</a>
<ul id="toggled">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
<ul>

CSS:

#toggled{
    max-height: 0px;
    transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;
}

#trigger:hover + #toggled{
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0); 
    transition-delay: 0s;
}

参见示例：http://jsfiddle.net/0hnjehjc/1/

每当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的高度动画，该外部DIV有一个子级，这是一个仅用于测量内容高度的无样式DIV。

函数growDiv（）{var growDiv=文档.getElementById（'grow'）；if（growtDiv.clientHeight）{growtDiv.style.height=0；}其他{var wrapper=document.querySelector（'.measureingWrapper'）；growDiv.style.height=wrapper.clientHeight+“px”；}}#成长{-moz过渡：高度.5s；-ms过渡：高度.5s；-o过渡：高度.5s；-webkit过渡：高度.5s；过渡：高度.5s；高度：0；溢出：隐藏；轮廓：1px纯红色；}<input type=“button”onclick=“growDiv（）”value=“grow”><div id='grow'><div class='measureingWrapper'>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div></div></div>

人们希望能够省去.metringWrapper，只需将DIV的高度设置为auto并设置动画，但这似乎不起作用（设置了高度，但没有动画发生）。

函数growDiv（）{var growDiv=文档.getElementById（'grow'）；if（growtDiv.clientHeight）{growtDiv.style.height=0；}其他{growDiv.style.height=“自动”；}}#成长{-moz过渡：高度.5s；-ms过渡：高度.5s；-o过渡：高度.5s；-webkit过渡：高度.5s；过渡：高度.5s；高度：0；溢出：隐藏；轮廓：1px纯红色；}<input type=“button”onclick=“growDiv（）”value=“grow”><div id='grow'>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div></div>

我的解释是，动画运行需要明确的高度。当高度（起始高度或结束高度）为自动时，无法获得高度动画。

似乎没有合适的解决方案。最大高度方法非常好，但在隐藏阶段效果不佳-除非你知道内容的高度，否则会有明显的延迟。

我认为最好的方法是使用最大高度，但仅限于表演阶段。不要在隐藏时使用任何动画。在大多数情况下，这并不重要。

最大高度应该设置为一个非常大的值，以确保任何内容都适合。可以使用过渡持续时间控制动画速度（速度=最大高度/持续时间）。速度不取决于内容的大小。显示整个内容所需的时间将取决于其大小。

document.querySelector（“button”）.addEventListener(“点击”，函数（）{document.querySelector（“div”）.classList.tggle（“hide”）；})分区{最大高度：20000px；过渡：最大高度3000ms；overflow-y：隐藏；}.隐藏{最大高度：0；过渡：无；}<button>切换</button><div class=“hide”>Lorem ipsum dolor坐amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。</div>