Skip to main content

[Snippet] slideup, slidedown animation effect

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

程式範例#

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');}