目標
用flex
及 transition
製作點擊後圖片展開,同時圖片上下方移入文字的動畫效果
step 1 : panels 元素的 flex 設定
一開始圖片為上至下排序,所以先將圖片改成左至右排序,且等寬排列
.panels {
...
/* 在父元素設定 flex,讓圖片左至右排序 */
display: flex;
}
.panel {
...
/* 子元素的 flex 設爲 1,讓子元素等寬填滿 */
flex: 1;
}
step 2 : panel 元素的 flex 設定
.panel {
...
flex: 1;
/* 設定 display: flex,控制 penel 元素下層的 p 元素排列, */
display:flex;
/* 子元素主軸置中 */
justify-content:center;
/* 子元素垂直軸置中 */
align-items:center;
/* 子元素顯示方向從上至下 */
flex-direction:column;
}
step 3 : 處理 panel 中的文字的上下移動
/* 初始時,panel 下層第一個 p 元素經由 transform 的方法向上移動 */
.panel > *:first-child {transform:translateY(-100%);}
/* 若添加 class name: open-active,panel 下層第一個 p 元素移回原定位*/
.panel.open-active > *:first-child {transform:translateY(0);}
/* 初始時,panel 下層最後一個 p 元素經由 transform 的方法向下移動 */
.panel > *:last-child {transform:translateY(100%);}
/* 若添加 class name: open-active,panel 下層最後一個 p 元素移回原定位*/
.panel.open-active > *:last-child {transform:translateY(0);}
step 4 : 處理點擊 panel 元素後顯示圖片的區塊增大五倍
.panel.open {
...
flex:5;
}
step 5 : 監聽所有的 panel
const panels = document.querySelectorAll('.panel');
function toggleOpen(){
// 點擊後,
// 若原本class name 沒有 open,增添加 open,讓顯示圖片的區塊變大五倍
// 若原本 class name 已有 open,增清除 open,讓顯示圖片的區塊恢復原大小
this.classList.toggle('open');
}
// 透過顯示圖片的區塊變大的動畫監聽 transitionend 事件,觸發 toggleActive function
function toggleActive(e){
// console.log(e.propertyName);
// 判斷監聽的 propertyName 是否包含 flex,使其在 flex 之後觸發
// 包含的話,toggle class name: open-active 來控制在範圍外的文字移動效果
if (e.propertyName.includes('flex')){
this.classList.toggle('open-active');
}
}
// 監聽 click 事件,點擊後觸發 toggleOpen function。
panels.forEach(panel => panel.addEventListener('click', toggleOpen));
// 監聽 transitionend 事件,在 CSS transition 结束後觸發 toggleActive function。
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
參考資料:
- Flexbox + JavaScript Image Gallery — #JavaScript30 5/30 @Wes Bos
- [ Alex 宅幹嘛 ] 👨💻 深入淺出 Javascript30 快速導覽:Day 5:Flex Panel Gallery @Alex 宅幹嘛
- 05 - Flex Panel Gallery @guahsu
- 05 Flex 实现可伸缩的图片墙 中文指南@soyaine
- Gallery@dustin
- JS30 自學筆記 Day05_Flex Panels Image Gallery@jen147774ny
- JS30-Day5-Flex Panels@王郁翔