Day23 六角 Off Canvas #2

簡單小語

CodePen看看高手們的OffCanvas的模樣，一看到這個照片的樣板，就決定嘗試做做看了，做完發現自己知識量真的不足，高手的轉場跟我使用單純的加減class不一樣，導致我若要使用toggleClass行為上會有點異常(但不知道要如何修改)，於是先求網頁效果正常就使用addClass及removeClass作為主軸撰寫，參考高手作品嘗試模仿，我想也是一種刻意練習，也是一種給予自我挑戰的機會(還是要問人查資料就是)，持續努力。

筆記分享

1. 圖片排版不囉唆，flex排下去，尺寸抓好，換行設好，一切搞定。
2. 因點擊後出現大圖，所以flex排版上直接使用justify-content:space-around讓出現的圖片與.pic有預留空間。
3. 手機與電腦所需呈現樣式不同，排版及點擊出現位置需多次微調(就是沒寫好的意思)。
4. 滑動效果用一貫的transition設定秒數，有些單調卻也實用。
5. JQuery點擊條件寫的又臭又長，希望未來回來看可以唸唸自己的寫法。
6. JQuery理當可以找到一個通吃的寫法，但小弟不才只能一個一個寫，導致看上去重複事項過多。
7. 利用addClass及removeClass去控制出現及消失的效果。
8. 使用toggle後會造成二次點擊無法收回的狀況(靠六角大大協助完成)。
9. 設定了固定高度heigth:1000px是為了讓點擊的後出現的圖片不會被overflow: hidden而蓋掉而撰寫。
10. JQuery的效果控制有待加強，才能讓效能及程式碼乾淨簡潔。

刻意練習

Practice(200816 Day 23)

樣板來源

Accessible off-canvas grid gallery

2020 iT邦幫忙鐵人賽 Day23 網頁前端-刻意練習(Off Canvas #2)