[Snippet] slideup, slidedown animation effect

用 CSS Animation 製作 slideUp, slideDown 的效果：

See the Pen SlideUp and SlideDown with CSS Animation by PJCHEN (@PJCHENder) on CodePen.

程式範例

CSS

要先知道該容器展開後的高度大概是多高，這裡是 250px，這樣才會有漸進的動畫。
height：在開始時要設成 0，在接近動畫最後的時候（95%），把高度設成容器高度；但在 100% 的時候最好改回 auto，因為不確定這個容器之後會不會有一些效果再把內部的高撐寬（例如，表單驗證錯誤時會顯示提示訊息，此時容器的高會被稱的比原本的 250px 還要高），所以在結束 100% 時把高設成 auto。
visibility：在開始時要設成 hidden，不然容器的邊框會露出來。
overflow：開始時要設成 hidden，不然即使容器高縮小了，裡面的內容還是會看得到。

$slide-content-height: 250px;

html,
body {
  padding: 30px;
}

// 起始狀態
[data-target='slide-content'] {
  height: 0;
  overflow: hidden; // 隱藏容器內部的內容（否則高度 0 也沒用）
  visibility: hidden; // 隱藏容器的框線
}

.slide-down {
  animation: slide-down 0.3s linear both;
}

.slide-up {
  animation: slide-up 0.3s linear both;
}

@keyframes slide-down {
  0% {
    visibility: hidden;
    height: 0;
  }

  95% {
    visibility: visible;
    height: $slide-content-height;
  }

  // 動畫結束時把高設成 auto
  100% {
    visibility: visible;
    height: auto;
  }
}

@keyframes slide-up {
  from {
    visibility: visible;
    height: $slide-content-height;
  }

  to {
    visibility: hidden;
    height: 0;
  }
}

JS

slideDown 時，在 slideContent 添加 slide-down，移除 slide-up 的 class。
slideUp 時，在 slideContent 移除 slide-down，添加 slide-up 的 class。

const slideUpBtn = document.querySelector('[data-target="slide-up"]');
const slideDownBtn = document.querySelector('[data-target="slide-down"]');
const slideContent = document.querySelector('[data-target="slide-content"]');
slideDownBtn.addEventListener('click', slideDown);
slideUpBtn.addEventListener('click', slideUp);

function slideDown(e) {
  e.preventDefault();
  slideContent.classList.add('slide-down');
  slideContent.classList.remove('slide-up');
}

function slideUp(e) {
  e.preventDefault();
  slideContent.classList.add('slide-up');
  slideContent.classList.remove('slide-down');
}

程式範例​

CSS​

JS​

程式範例

CSS

JS