花了一整個假日的時間，不知道這樣的是好還是不好，
看著instagram上大家打卡郊遊，自己卻在螢幕前做著不知道哪一天會用上的東西，
就算真的準備好了機會真的會來嗎？

其實蠻沮喪的，覺得自己的努力可以被別人肯定，所以難著作品給別人看，但其實沒有。

在高手眼裡，就只是一個普普通通破綻百出的作品，
不過我想沒關係吧，沈澱一下，高手也是失敗來的，跌倒了在原地出發就可以了吧。

職場上的人際關係真的不容易，原本以為平常鼓勵幫助我的高手們，會一直給我鼓勵，
但其實沒有。還是會覺得你煩覺得你技術不到位，
虛心求教，但被說嘴又要笑笑，想要練就一身強健的心智。
只能鼓勵自己，大家只是真的很喜歡你，所以願意跟你開玩笑，只是自己太玻璃心了。
自己學儘管再怎麼努力，還是會比有人給key points 慢上許多，

希望有一天自已變成很厲害的人的時候，還可以記住這時候遇到的總總，給向上的新人更多鼓勵，適時的給予他們一些人生方向，儘管雞婆點，也不要扼殺新血的活力。

看著一些資深的人不斷不段往上爬到更高的位子，心裡就會想要更努力點，不知道一直這樣下去可以成長到什麼地步，職場真的很吃機運，但讓自己的天花板更高一些，能裝下的知識就會更多的，加油吧！！！我知道我自己可以的。

在父母眼中你永遠是一個孩子
不要停止思考，因為我們都還年輕，我們有一天成為厲害的也還是前輩眼中的菜鳥，
我想著獨立完成作品，儘管不一定是一個會成功的商品，但決定了，就做到最後吧，別人嘲笑你的夢想，難道是真的這麼可笑嗎？我想他們只是羨慕自己也曾經有夢，失敗了所以想看著你製造的笑話。
風涼的說著：早說了這些是不可行的。
但這世界一定沒有什麼是不可行的，撞牆了就把牆撞破，牆壁太厚就轉歪繞路，不知道這條路多遠多長，但一直走下去一定會看到終點，真的沒有終點也沒關係，繞了一圈回到原點，也已成為環遊世界的人了。

05 - Flex Panel Gallery

首次上傳：2020/09/13

推薦flex學習小遊戲: flexboxfroggy ![] (https://flexboxfroggy.com/)

display{
    justify-content: 左右橫移;
    align-items: 上下;
    flex-direction: row, column 平移, 垂直 ;
    flex-direction: row-reverse; 平移的鏡向;  (並不會 垂直不會也鏡像)
    flex-direction: column-reverse; 垂直的鏡向;  (並不會 平移不會也鏡像)

    
}

[-reverse: 鏡像最後一個item為軸]
[當reverse後 軸的起始點會改變, start -> end, end -> start]

level 1

1	justify-content: flex-end

level 2

1	justify-content: center

level 3

1	justify-content: space-around

level 4

1	justify-content: space-between

level 5

1	align-items: flex-end;

level 6

1 2	align-items: center; justify-content: center;

level 7

1 2	justify-content: space-around; align-items: flex-end

level 8

1	flex-direction: row-reverse;

level 9

1	flex-direction: column

level 10

1 2	justify-content: flex-end; flex-direction: row-reverse;

level 11

1 2	flex-direction: column; justify-content: flex-end;

level 12

1 2	flex-direction: column-reverse; justify-content: space-between;

level 13

1 2	flex-direction: column-reverse; justify-content: space-between;

level 14

order :1

level 15

order: -3

level 16

1	align-self: flex-end;

level 17

1 2	order: 1; align-self: flex-end;

level 18

1	flex-wrap: wrap;

level 19

1 2	flex-direction: column-reverse; flex-wrap: wrap;

level 20

1	flex-flow: column wrap;

level 21

1	align-content: flex-start

level 22

1	align-content: flex-end

level 23

1 2	flex-direction : column-reverse; align-content: center

level 23

flex-wrap: wrap-reverse;
justify-content: center;
flex-direction: column-reverse;
align-content: space-between;

主題

用CSS與JS來製作一個點擊後會動畫展開的圖片展示效果，
運用到了CSS的flex、transform、transition.. 這篇比較偏向css知識！

步驟

Step1

由於整體HTML的tag是由1個panels包覆5個panel，
為了使其設定為flex，先在外層容器panels加上display: flex
接著為每個panel加上flex: 1來使各子元件最大占比為1
也就會變成同容器中的5個元件都設1，那就是每個元件最大占比為20%。
(因對flex並不熟悉，我是用占比來理解，若有錯請在指正..感謝@@)

Step2

在為panel加上justify-content: center使其水平置中，
並在加上了display: flex及flex-direction: column，
再加上一層display: flex可以使panel底下的元件也變成flex控管

Step3

對panel底下的first-child及last-child做位移效果，
使其能在預設狀態於可視範圍外，並設計open-active
當觸發時，配合transition產生移回原位的動畫，
也在.panel.open中新增了flex: 5使其觸發時會有展開的動畫。

Step4

編寫JS先取得所有panel的節點，
接著設計toggle function使執行的物件藉由.classList.toggle來新增/移除動畫class
並透過addEventListener來監測當click&transitionend時觸發toggle function。

.classList&transitionend &toggle在>第一篇<剛好有提到。

Javascript語法&備註

e.propertyName & includes()

在範例中，觸發動畫效果的順序為：

click其中一張圖(panel)觸發addEventLinstner中的toggleOpen
為其增加.open，增加Flex: 5的效果，同時也是使用了.panel中的transition: flex這段
當.open的transition結束時，觸發了transitionend來作動toggleActive
為其增加.open-active效果，讓原本可是範圍外的p文字滑入

在順序:4時有個判斷，

function toggleActive(e) {
    if (e.propertyName.includes('flex')) {
        this.classList.toggle('open-active');
    }
}

e.propertyName可以抓到觸發transitionend的屬性名稱，
而.open中觸發的transition屬性有兩個，分別為font與flex
要使其在flex之後在觸發的話，就要判斷進來的是不是flex
但因為transition: flex 0.7s..這段在sarafi是flex，而其他瀏覽器為flex-grow
所以不能用e.property === 'flex'來寫，會使其中一方瀏覽器抓不到值，
作者提到因為兩者都有flex的字眼，所以利用.includes('flex')來判斷，只要e.property`有包含到flex的字串就使其通過判斷，加入動畫效果。

參閱:MDN-String.prototype.includes()

CSS語法&備註

flex

flex我目前還不熟，他還在我的待讀清單中XD
僅依據目前這篇使用到的做筆記：

display: flex

把該容器設定為flex模式，可以在其他flex中設定(角色為子元素時)

flex: flex-grow flex-shrink flex-basis

flex的簡寫，第一個為占比、第二個為壓縮值、第三個為默認尺寸

flex-direction

flex排列的方向，colume(垂直向)或row(水平向)，預設為row

行與列的中文用法，我自己有點混淆
像是我會說第314行要加個分號喔，也會說工具列上第3個icon
兩者都是在描述水平向，但我卻用了不同的字去形容囧

justify-content & align-items

依據flex-direction設定的主/側軸來決定排列方式，
例如設定flex-direction: row那麼
justify-content: center就指水平置中，
而align-items: center代表垂直置中。

參閱：MDN-CSS Flexible Box Layout

:first-child() & :last-child()

CSS的:偽類別，分別可以選取first(第一個)/last(最後一個)子元素，
在範例的panel中，除了主圖的大字外，上下各有一個p包含了點擊後進場的動畫文字：

<div class="panel panel1">
<p>Hey</p>
<p>Let's</p>
<p>Dance</p>
</div>

透過panel > *:first-child選取Hey
透過panel > *:last-child選取Dance

探索

當展開其中一個時，在點其他的panel並不會關閉第一個已展開的效果，
若要達到每次點擊都是一個聚焦效果(關閉其他已展開的)的感覺得話，
我是這麼做的：

//宣告一個上次點擊的Panel，預設先給他panels
let lastClickPanel = document.querySelector('.panels');

function toggleOpen() {
    //每次檢查進入的element與上次進入的element是不是相同
    //若不相同，則把上次點擊的element移除opev效果
    //再把lastClickPanel指向為這次的elment
    if (this !== lastClickPanel) {
        lastClickPanel.classList.remove('open');
        lastClickPanel = this;
    }
this.classList.toggle('open');
}

[DEMO]

BobChochola's Note

JavaScript-Flex-Panel-Gallery-05