這次的練習，也比較簡單，但也有些需要注意的地方，大多都在css的控制

以下為原始碼

https://github.com/87JoJo/05---Flex-Panel-Gallery

我們要的功能就是，當按下對應圖片，首先會拓展圖片，並將上下的字回歸原位。再點一下，就變回來。

一開始長如下

最終結果如下

首先我們要利用flex將
整個圖片轉向，並將每個圖片都分配同比例。

    .panel {
      ...
      display: flex;
      /* 每張圖佔一等份 */
      flex: 1;
      /* 改變其方向 */
      flex-direction: column;
      justify-content: center;
      }

將字體置中

    .panel p {
      ...
      /* 文字置中 */
      display: flex;
      align-items: center;
      justify-content: center;
    }

而後，我們利用transform: translateY將上下的字體給隱藏起來。
注意，參數如使用%，是以元素本身大小作為計算基準，故要在panel下全部子元素下高度比例

    /* 所有panel下的第一個子元素 */
    .panel>*:first-child {
      transform: translateY(-100%);
    }

    .panel>*:last-child {
      transform: translateY(100%);
    }

   .panel>* {
      margin: 0;
      width: 100%;
      /* for translateY*/
      height: 100%;
      transition: transform 0.5s;
    }

再來設置，點擊後會觸發的樣式，點擊圖片比例及字體會變大

    .panel.open {
      font-size: 40px;
      flex: 3;
    }

點擊後第一及最後的元素(字)會回原位

    .panel.open-active>*:first-child {
      transform: translateY(0%);
    }

    .panel.open-active>*:last-child {
      transform: translateY(0%);
    }

最後就是利用js控制，在js部分，要注意的地方就是transitionend，因為transitionend
(動畫結束)，會依據屬性數量做觸發，而在此題目，我們會觸發的事件總共有兩個屬性，
所以如果我們刪除判斷式，將會沒有功能，因為等於open-active觸發兩次，他加上這個
class又給他刪除，所以必須判斷，是否有一個對應的事件觸發。

  function transitionendHandler(e) {
    console.log(e); // 獲取屬性(font-size,flex-grow)
    
    // indexOf() 方法會回傳給定元素於陣列中第一個值，若不存在於陣列中則回傳 -1
    // if (e.propertyName.indexOf('flex') !== -1) { //如果存在flex會回傳-1
    //   this.classList.toggle('open-active');
    // }
    if (e.propertyName === 'flex-grow') { //也可判斷是否有名為flex-grow的事件
      this.classList.toggle('open-active');
    }
  }