如何通过过渡打开/关闭文本？

Question

我正在制作一个页面，该页面的文本以可见标题开始不可见。如果单击标题，则文本将显示在下方。我正在添加收尾工作，并希望使文本滑入。 切换由 Javascript 控制，而不是 jQuery。理想的情况是仅使用 CSS 执行此操作，但对 Javascript 开放。 下面的 HTML 内容，用 Javascript 控制下面的切换。

已经尝试了一个纯 CSS 的解决方案（如下），但不起作用；

function view(id) { //this reads the div id variable passed in with each 'onclick' trigger
  var x = document.getElementsByClassName("descriptions"); //this will find all your descriptions MUST HAVE "description" class
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].id !== id)
      x[i].style.display = "none"; //this will turn off all your descriptions except current one
  }
  var e = document.getElementById(id); //this will toggle on/off your active description
  if (e.style.display == 'block')
    e.style.display = 'none';
  else
    e.style.display = 'block';
}

.descriptions {
  display: none;
  height: 100;
  transition: height 0.8s;
}

<div class="toggle" id="a" onclick="view('a1');">
  Chocolate cake with Nutella icing
  <div id="a1" class="descriptions">
    How to make a chocolate cake.
  </div>
</div>

Answer 1

您可以尝试使用opacity，它允许您在CSS 中使用transition。

function view(id) { //this reads the div id variable passed in with each 'onclick' trigger
  var x = document.getElementsByClassName("descriptions"); //this will find all your descriptions MUST HAVE "description" class
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].id !== id)
      x[i].style.opacity = 0; //this will turn off all your descriptions except current one
  }
  var e = document.getElementById(id); //this will toggle on/off your active description
  if (e.style.opacity == 0)
    e.style.opacity = 1;
  else
    e.style.opacity = 0;
}

.descriptions {
  transition: all 0.3s;
  opacity: 0;
  height: 100;
}

<div class="toggle" id="a" onclick="view('a1');">
  Chocolate cake with Nutella icing
  <div id="a1" class="descriptions">
    How to make a chocolate cake.
  </div>
</div>