Day 5 - Flex Panels Image Gallery


Posted by hoyi-23 on 2021-07-20

運用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小遊戲-類別選擇










Related Posts

Command Line 筆記

Command Line 筆記

[ALG101] Unit5:經典題目解解看 ( live coding )

[ALG101] Unit5:經典題目解解看 ( live coding )

跟你的朋友介紹 Git

跟你的朋友介紹 Git


Comments