高度的 CSS 过渡而不设置静态初始高度

Question

我正在尝试应用一个类，该类将使用 CSS 过渡将不透明度和高度从默认的 100% 均匀地淡化为 0。

发生的情况是不透明度均匀衰减，但高度保持在 100%，然后在 0.5 秒过渡结束时跳到 0。

如何让高度与不透明度一起均匀过渡？

更新： 如果不在 div 上设置静态初始高度，如何做到这一点？文本流向的高度在不同的浏览器宽度下会有所不同。

function fadeOut(){
$('#intro').addClass('fadeout');
}

$('#fadeout').on('click', fadeOut);

.fullheight{
  position: relative;
  height: 100%;
}

.fadeout{
  opacity: 0;
  height: 0;
  transition: all .5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fullheight" id="intro">Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out.</div>
<button id="fadeout">Fade out</button>

Answer 1

为此，您需要在我的示例中将高度设置为 100px 之类的设定值

function fadeOut(){
$('#intro').addClass('fadeout');
}

$('#fadeout').on('click', fadeOut);

.fullheight{
  position: relative;
  height: 100px;
}

.fadeout{
  opacity: 0;
  height: 0;
  transition: all .5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fullheight" id="intro">Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out.</div>
<button id="fadeout">Fade out</button>