[筆記][JS30天-Day05] Flex Panels Image Gallery

實做：使用flex實做出圖片牆

---

學習重點

• flexbox
• element.classList.toggle()
• transitionend Event

---

解說

• CSS在此篇為主要學習重點

  • 將.panels設為 display : flex
  • 將每個panel設為 flex : 1
  • 將每個panel設為 display : flex , 並使用 flex-direction將子元素<p>改為垂直方向

• 為每一個panel加入監聽事件：click 以及 transitionend

  panels.forEach(panel=>{
    panel.addEventListener('click',toggleOpen);
    panel.addEventListener('transitionend',toggleActive);//動畫結束後觸發transitionend事件
  });

• function toggleOpen 以及 toggleActive 使用toggle新增移除class

  toggle ( String [, force] )
  When only one argument is present: Toggle class value; i.e., if class exists then remove it and return false, if not, then add it and return true.
  When a second argument is present: If the second argument is true, add specified class value, and if it is false, remove it.

  function toggleOpen(){
    this.classList.toggle('open');
  }
  
  function toggleActive(e){
    // 因class open 有新增 flex 屬性
    // 確保有套上open後才新增open-active
    if(e.propertyName.includes('flex')){
      this.classList.toggle('open-active');
    }
  }

  .panel.open {
    font-size: 40px;
    flex: 5; /*被點擊的圖片比例改變為5*/
  }

補充

transitionened 補充

Element.classList