进行文本过渡，下方的文本移动以为上方的文本腾出空间答案

【问题标题】：Making text transition in, with text below moving to make room for text above进行文本过渡，下方的文本移动以为上方的文本腾出空间
【发布时间】：2019-10-18 08:52:01
【问题描述】：

我正在尝试使切换的描述滑动或淡入，而不是突然出现。我还想保留文本上下移动的特性，以适应已打开的文本。理想的情况是使用 CSS 或 Javascript，不使用 jQuery 等。

已经尝试过 CSS 不透明度过渡，但文本不会上下移动以适应切换的文本；

function view(id) {
  var x = document.getElementsByClassName("descriptions");
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].id !== id)
      x[i].style.display = "none";
  }
  var e = document.getElementById(id);
  if (e.style.display == 'block')
    e.style.display = 'none';
  else
    e.style.display = 'block';
}

.descriptions {
  display: none;
}

<div class="toggle" id="a" onclick="view('a1');">Toggle Div 1
  <div id="a1" class="descriptions"> Here's some text we want to toggle visibility of. Let's do it!</div>
</div>

<div class="toggle" id="b" onclick="view('a2');">Toggle Div 2
  <div id="a2" class="descriptions"> Here's some text we want to toggle visibility of. Let's do it!</div>
</div>

<div class="toggle" id="c" onclick="view('a3');">Toggle Div 3
  <div id="a3" class="descriptions"> Here's some text we want to toggle visibility of. Let's do it!</div>
</div>

【问题讨论】：

标签： javascript html css css-transitions

【解决方案1】：

也许像这样使用高度？

function view(id) {
  let el = document.getElementById(id);
  if (el.classList.contains('hide')) {
    el.classList.remove('hide');
  } else {
    el.classList.add('hide');
  }
}

.toggle {
  overflow: hidden;
}

.descriptions {
  max-height: 100px;
  transition: all 0.5s ease-in;
}

.hide {
  max-height: 0 !important;
  transition: all 0.2s ease-out;
}

<div class="toggle" id="a" onclick="view('a1');">Toggle Div 1
  <div id="a1" class="descriptions hide"> Here's some text we want to toggle visibility of. Let's do it!</div>
</div>

<div class="toggle" id="b" onclick="view('a2');">Toggle Div 2
  <div id="a2" class="descriptions hide"> Here's some text we want to toggle visibility of. Let's do it!</div>
</div>

<div class="toggle" id="c" onclick="view('a3');">Toggle Div 3
  <div id="a3" class="descriptions hide"> Here's some text we want to toggle visibility of. Let's do it!</div>
</div>

【讨论】：