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

Question

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

Answer 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>