SOURCE

(function () {
  		// 折叠过渡时间
      var collapseDuration = 700;
      // taskQueue 用于防抖
      var taskQueue = [];
      // 清除任务
      function clearTask(){
        var taskID;
        while( taskID = taskQueue.shift()){
          if (!taskID){
            break;
          }
          clearTimeout(taskID);
        }
      }
      // 隐藏折叠元素
      var hide = function (element) {
        element.classList.remove('collapse');
        element.classList.remove('show');
        var height = window.getComputedStyle(element).getPropertyValue('height');
        element.classList.add('collapsing');
        element.style.height = height;
        element.dataset.height = height;
        taskQueue.push(setTimeout(function () {
          element.style.height = '';
          taskQueue.push(setTimeout(() => {
            element.classList.remove('collapsing');
            element.classList.add('collapse');
          }, collapseDuration))
        }, 0));
      };
      // 显示折叠元素
      var show = function (element) {
        element.classList.remove('collapse');
        element.classList.add('collapsing');
        taskQueue.push(setTimeout(() => {
          element.style.height = element.dataset.height;
          taskQueue.push(setTimeout(() => {
            element.classList.remove('collapsing');
            element.classList.add('collapse');
            element.classList.add('show');
          }, collapseDuration))          
        }, 0));
      };
      // toggle 折叠元素
      var toggleCollapse = function(element){
        if (element.classList.contains('show')){
          hide(element);
        }else{
          show(element);
        }
      };
      var togglerSelector = '*[data-toggle="collapse"]';
      var togglers = Array.prototype.slice.call(document.querySelectorAll(togglerSelector));
      togglers.forEach(function (toggler) {
        var targetSelector = toggler.dataset['target'];
        if (!targetSelector) {
          return;
        }
        var target = document.querySelector(targetSelector);
        if (!target) {
          return;
        }
        toggler.onclick = function () {
          clearTask();
          toggleCollapse(target);
        };
      });
    })();

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse show" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

.btn{
  padding: .75rem 1.5rem;
  background: transparent;
  border-radius: .25rem;
  font-weight: 700;
  &:not(.disabled):not(:disabled){
    &:hover, &.hover{
      background: darken(#fff, 30%);
      color: #fff;
    }
  }
}
.card{
  display: flex;
  flex-direction: column;
}
.card-body{
  padding: .75rem 1.5rem;
  background: #fff;
  border-radius: .25rem;
  border: 1px solid rgba(#000, .125)
}
// for transition
.collapse{
  display: none;
  &.show{
    display: block;
  }
}
.collapsing{
  height: 0;
  transition: height ease .8s;
}