使文本过渡,下面的文本移动以为上面的文本腾出空间

Making text transition in, with text below moving to make room for text above

我正在尝试让切换的描述滑动或淡入,而不是突然出现。我还想保留文本上下移动的功能,以适应已打开的文本。理想情况是使用 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>

也许像这样使用高度?

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>