repo

目標

今天要來做的是使用Flex進行圖片展示，然後再加上一些點擊特效

Step1

首先，要先來調整CSS，圖片一開始會以下圖的方式排列

我們要將圖片轉成直向排列

.panels {
	display: flex;
}

display: flex; 將 .panels 轉成flex container

.panels的子元素就可以使用flex設定

.panel {
	flex: 1;
	/*水平對齊*/
  justify-content: center;
	/*垂直對齊*/
  align-items: center;
  display: flex;
	/*排列方向*/
  flex-direction: column;
}

同一元素可以同時作為flex element以及flex container

接下來，要對文字部分做相同處理

.panel>* {
	flex: 1 0 auto;
	display: flex;
	/*水平對齊*/
	justify-content: center;
	/*垂直對齊*/
	align-items: center;
}

.panel>* >指的是.panel下的子元素，>*即是指.panel的所有子元素

Step2

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

透過改變文字區塊的Y軸，將文字移出畫面

first-child 可以選定子元素的第一個

last-child 則是選定子元素的最後一個

Step3

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

function toggleOpen() {
    this.classList.toggle('open');
}

function toggleActive(e) {
    console.log(e.propertyName);
    if (e.propertyName.includes('flex')) {
        this.classList.toggle('open-active');
    }
}

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

element.classList.toggle()

When only one argument is present: Toggle class value; i.e., if the class exists then remove it and return false, if not, then add it and return true. When a second argument is present: If the second argument is true, add specified class value, and if it is false, remove it.