PJCHENder 未整理筆記

[Snippet-CSS] slideup, slidedown animation effect

2019-01-22

[Snippet-CSS] slideup, slidedown animation effect

@(CSS)[snippet, animation]

用 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,不然即使容器高縮小了,裡面的內容還是會看得到。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
$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。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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");
}
Tags: snippet

掃描二維條碼,分享此文章