【JS30-5】Flex Panels Image Gallery

JavaScript30 傳送門：https://javascript30.com/

挑戰５透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果，看別人的成果：yhabib.github.io

本次練習の心得：

1. 製造過度效果延遲的方法：transition-delay V.S. transitionend
   在完成作品網頁可以看到本次挑戰中，點擊卡片時，上下排的字 in & out 都有延遲。
   如果有明確的延遲秒數，可以透過 transition-delay 來解決，這也是我原本想的。但教學影片用 transitionend 事件來觸發上下排字的進退場，這樣一來：
   (1) 不用計算延遲的秒數
   (2) 可以準確指定在哪一個 transition 結束時啟動 function

以上，只有一個心得，有緣再見 (୨୧•͈ᴗ•͈)