「JavaScript 30」學習筆記（五）

「JavaScript 30」Study Notes
,

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

製作出類似手風琴效果的頁面。

筆記

首先是 CSS 的部分。

在 .panels 增加：

1
display: flex;
  • display: flex 表示內部使用伸縮容器。

在 .panel 增加：

1
2
3
4
5
flex: 1;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
  • flex: 1 代表每一個伸縮容器有相同比例。
  • flex-direction: column 代表垂直顯示伸縮容器。

在 .panel > * 增加：

1
2
3
4
flex: 1 0 auto;
display: flex;
justify-content: center;
align-items: center;
  • flex 是 flex-grow、flex-shrink、flex-basi 的縮寫，預設値是 0 1 auto。
  • flex-grow 是伸縮容器在主軸上占總容器的比例。
  • flex-shrink 是當容器空間不足時，伸縮容器在主軸上縮小的比例
  • flex-basis 是伸縮容器的初始尺寸。

增加 transform 如下：

1
2
3
4
5
6
7
8
9
10
11
12
.panel > *:first-child {
    transform: translateY(-100%);
}
.panel.open-active > *:first-child {
    transform: translateY(0);
}
.panel > *:last-child {
    transform: translateY(100%);
}
.panel.open-active > *:last-child {
    transform: translateY(0)
}
  • translateY 表示 Y 軸的偏移量。

在 .panel.open 增加：

1
flex: 5;

再來是 JavaScript 的部分。

先取得所有 panel 元素。

1
const panels = document.querySelectorAll('.panel');

設定一個 toggleOpen() 的方法。

1
2
3
function toggleOpen() {
    this.classList.toggle('open');
}
  • toggle() 方法會在指定元素被點擊時，在 2 個方法之間輪流切換。

設定一個 toggleActive() 的方法。

1
2
3
4
5
function toggleActive(e) {
    if(e.propertyName.includes('flex')) {
        this.classList.toggle('open-active');
    }
}
  • 因為不只一個 transitionend 事件，所以需要使用 e.propertyName 綁定 flex。

在 click 和 transitionend 事件出現時，分別觸發 toggleOpen() 和 toggleActive() 方法。

1
2
3
panels.forEach(panel => panel.addEventListener('click', toggleOpen));

panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));