JS30挑戰-Day5-Flex+Panel

本篇文章主要紀錄觀看Alex大大直播紀錄後，所做的筆記記錄
demo連結

參考資料：
Alex直播連結
JS30紀錄-其他人的筆記

---

Css講解

Flex整理教學

使用Flex巢狀結構

小技巧：可以使用border : 1px solid red來觀察排版

/* Flex Children，這邊是針對每個p段落再設定flex container*/
    .panel > * {
      margin: 0;
      width: 100%;
      transition: transform 0.5s;
      display: flex;
      justify-content: center;
      align-items: center;
      flex:1;
      border: 1px solid red;
    }

補充：省略.panel > * {justify-content: center;}示意圖如下

JS開始講解

1.動態切換class

影片連結
MDN-classList 與 jQuery add/remove/toggle 效果一樣

// class切換
 function clickHandler(e){
   this.classList.toggle('open')
 }

2.兩段動畫切換

TransitionEnd 影片教學
Transitionend：
transitionend 事件會在CSS transition 結束後觸發。MDN資料
注意：TransitionEnd會因為屬性數量不同，而觸發不同次效果。
可以透過console.log(e)查看
課堂範例：

.panel {
        transition:
        font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11);
}

function changeHandler(e){
     console.log(e)
     if(e.propertyName.includes('flex')){
       this.classList.toggle('open-active')
     }
   }

說明：
如果我們不加入if判斷式來指定特定propertyName觸發，會造成效果出不來。
原因如下：
1.TransitionEnd會因為屬性數量不同，而觸發不同次效果
2.而我們又使用toggle，如果是觸發偶數屬性則會先開又被關，基數則不會

小結論

建議：若不確定屬性數量，可以使用console.log(e)，印出來屬性數量

撰寫心得：

1.卡在transitionend 事件
2.includes 跟 === 搞混 陣列處理方法
3.this用法