CodePen看看高手們的OffCanvas
的模樣,一看到這個照片的樣板,就決定嘗試做做看了,做完發現自己知識量真的不足,高手的轉場跟我使用單純的加減class不一樣,導致我若要使用toggleClass
行為上會有點異常(但不知道要如何修改),於是先求網頁效果正常就使用addClass
及removeClass
作為主軸撰寫,參考高手作品嘗試模仿,我想也是一種刻意練習,也是一種給予自我挑戰的機會(還是要問人查資料就是),持續努力。
flex
排下去,尺寸抓好,換行設好,一切搞定。flex
排版上直接使用justify-content:space-around
讓出現的圖片與.pic
有預留空間。transition
設定秒數,有些單調卻也實用。addClass
及removeClass
去控制出現及消失的效果。toggle
後會造成二次點擊無法收回的狀況(靠六角大大協助完成)。heigth:1000px
是為了讓點擊的後出現的圖片不會被overflow: hidden
而蓋掉而撰寫。Accessible off-canvas grid gallery