iT邦幫忙

2

JS30 Day 5 - Flex Panel Gallery學習筆記

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

以下為原始碼

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

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

一開始長如下

https://ithelp.ithome.com.tw/upload/images/20200512/20126182CqCwitWMiw.png

最終結果如下

https://ithelp.ithome.com.tw/upload/images/20200512/20126182GUjHderJ15.png

首先我們要利用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');
    }
  }

尚未有邦友留言

立即登入留言