Day 5 - Flex Panels Image Gallery

運用flex特性與transition動畫效果，作出點擊後的效果呈現。

What's new?

1. Flex-grow/Flex-shrink-Flex-basis 運用 [文章參考](https://hoyis-note.coderbridge.io/2021/05/22/Flex-grow-Flex-shrink-Flex-basis/)
2. :first-child/:last-child/:nth-child(n)

How to do?

JavaScript

這個練習不難，JavaScript的部分就是兩個:
簡單的 偵測點擊與偵測變化 然後 toggle 加上 class樣示。

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

CSS

我覺得這次比較有趣的地方是在CSS上，雖然有學習到flex-grow/flex-shrink/flex-basic 和 :first-child/:last-child/:nth-child(n) 的相關知識，卻都沒有實際運用過。
這次終於使用到了!

1. 關於 flex-grow/flex-shrink/flex-basic 可以看這篇[文章](https://hoyis-note.coderbridge.io/2021/05/22/Flex-grow-Flex-shrink-Flex-basis/)

2. 關於 :first-child/:last-child/:nth-child(n)

這邊也推薦個 CSS小遊戲-類別選擇