iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

0
自我挑戰組

2020 iT邦幫忙鐵人賽 網頁前端-刻意練習系列 第 36

Day36 網頁前端-持續練習(風琴萬種)

Day36 風琴萬種

https://ithelp.ithome.com.tw/upload/images/20201005/20129161o880q6OsHB.png
https://ithelp.ithome.com.tw/upload/images/20201005/20129161SQwparHBEc.png

簡單小語

原來做了這麼久的收合選單,這種樣式叫做手風琴選單啊!果然風琴萬種(什麼爛梗……)無知如小魯的我,看了下樣板覺得可以更改樣式,讓展開的為圖片,並注意一些該圓角的小細節,其中卡關卡超久在JQuery的部分,如何讓預設展開情況下點擊後回到跟原先預設的動畫效果相同,一開始不以為意認為不難,結果做下去重重卡關,最後開啟開發者工具,一步步釐清典籍後該做什麼不該做什麼,才將樣式動畫給完成,不過在class的轉場動畫卻遲遲卡關,能力依舊不足,仍須努力找出方法並成功製作切換class的轉場動畫。

筆記分享

  1. 控制好html結構,具備彈性及修改姓,讓統一樣式利用統一class管理,寬高使用%來做自適應,這是我近期撰寫給自己的目標。
  2. 因兩個選單樣式基本相同,因此利用共同class製作樣式,再加入不同的font-awesome,可以大幅減少程式碼的撰寫。
  3. paddingmargin皆使用%來推移,習慣再習慣。
  4. li中的div,a,pic等等位置結構須注意,才能讓點擊時出現圖片並是在li下呈現。每每練習都需要重新思考,功力不足。
  5. 動態更換class使用toggleClass()並再點擊時讓其他siblings取消class,用說的有點繞口,需靜下心來思考每一步動作。
  6. 翻轉效果使用transform:translateY(-1)達成上下翻轉。
  7. 邏輯思考處在翻轉效果地方卡超久,經過動作拆解及看開發者工具點擊後的增減class完成動畫樣式。
  8. menn呈現四邊圓角,利用:first-child().pic5.pic10來設定圓角(釐清結構即可輕易上手)。
  9. 加入持續練習的To Do List,程式邏輯真的比CSS難上一個層級,只能靠不斷練習累積經驗。
  10. 圖片呈現皆用slideToggle完成樣式轉換(腦袋想不到其他的啊!!!),用了transform:scale(0)但依舊占住空間。

持續練習

Practice(200902 Day 36)

樣板來源

Material design Accordion — Bootstrap v3


2020 iT邦幫忙鐵人賽 Day36 網頁前端-持續練習(風琴萬種)


上一篇
Day35 網頁前端-持續練習(大俠漢堡)
下一篇
Day37 網頁前端-持續練習(電光一閃)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40

尚未有邦友留言

立即登入留言