從Adobe XD 到 html | Lip menu

— 自學UI日誌 Day14 —

這是第二次跟著蓋瑞學 css ，所以不再是 XD 上談兵。而這次又遇到更多的關卡，對於沒有網頁概念的新手直接做一個網頁還挺有挑戰的！第一次碰到隔夜的 css 和隔夜飯一樣難吃，原來快取是好東西也可能是不好的東西，但一定不是好市多。再來是 logo 就算打包成 group 匯出為 svg 檔背景整個消失，雖然 jpg 或 png 可以解決問題，但是解析度不甚理想。最大的遺憾就是這次得動畫無法在切換頁面的時候消失，但是 overlay 明明就已經遮住 section 得文字部分了啊～所以不是很能理解原因為何，這兩天有點做累了，說不定以後學更多就能夠回來解決問題！

prototype

原先預設的 prototype 樣貌。

網頁框架

一樣先在 html 文件裡，把應該要用到的菜刀先放到流理台上。

真的是有夠陽春。

突然發現蓋瑞有眼睛，但是我沒有，所以課程在前半不到就卡住勒…事後爬文才發現原來要自己加入 extension ! scss 才可以分裂為 css，但我不是很懂為什麼要建立 scss 而不是 css…

使用VSCode外掛自動編譯Sass/SCSS

假設還沒裝 Live Sass Compiler，找老半天也不會找到 watching 功能！！

使用外掛程式才能夠把 scss 自動轉成 css ！！

oh men～網頁終於成為我預期的樣子了～

padding 到底是什麼呢？ 剛剛試了一下，只知道 width 應該是指文字框佔畫面的幾趴，所以要讓文字置左可以用 70% ，假如向我這個置中案例的話可以用 50% 。

加入標頭的底線。學以致用，利用 magin 增加底線和文字的距離，然後用 width 改變底線的長度。

越來越有樣子了，摁摁摁～

現在回去做menu頁，先把需要用到的按鈕先設定好。

調整 menu 頁的背景。

close button 轉為和 hamburger 同一側。（左撇子辛苦了）

建立 menu 頁選項按鈕。

perfect! menu 頁完成！

頁面互動 與 動畫

做好兩個頁面以後，剩下的就是要讓頁面間產生互動。當使用者點擊 open menu 的按鈕時，則新增 show menu 事件。

menu 頁一開始不能被看見，所以 display 是none。

當 show menu 的情況發生時，則要 display 出 menu 頁。

但可以發現，現在的互動是單向的，一去不復返，所以必須要再建立回首頁的 script 。

很簡單，只要把 open-menu 改為 close-menu、add 改為 remove，就能夠順暢地回到首頁了。

oh~yes~

到了製作動畫的部分。一開始先預設 menu 頁是 x 軸向長度為 0 單位，假如要變形是從右側開始變形，意思就是從右側滑入 menu 頁。

動畫就是 menu 頁的 x 軸向長度從 0 單位變成 1 單位，就是橫向拉長的意思。

是有點像以前藍色水玲瓏的轉場啦～

(After sleeping 8 hr)
沒有一夕之間做完網頁的後果就是無法更新修該css後的網頁（崩潰～）
狂爬文：

強制瀏覽器每次重新載入 CSS, JS 檔

讓瀏覽器自動加載網頁中最新的CSS和JS文件 | 暢想資源

How to force the browser to reload cached CSS/JS files?

順便才知道，這網頁的三角關係，摁摁摁

Day02-網頁三兄弟：HTML、CSS、JavaScript - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

最後選用的方法是在文件名稱的尾端加入 ?v=<?= filemtime(‘main.css’) ?> 以及(或？)再次 watching scss檔案，才發現要做好因果推論的話，自變項只能有一個，所以我不確定是哪一個操作有效 XD

花了一個小時查資料終於更新成功了ＱＱ

加入close button的動畫（為期 1s），多了 1 個 1s 是要讓 icon 比 menu 頁慢ㄧ秒出來。

close button 的 opacity 從 0 至 1 就能夠有淡入的效果。

memu 頁中的各個選項也新增動畫，每個 item 的動畫時間長度為 0.8s 、間隔 0.2s 秒出現。

在此，蓋瑞也介紹非常好用的網站：http://bouncejs.com，可以先預覽動畫並自行調整，操作簡易方便，只要點選 export css，然後把 prefix css 的方框勾選去掉，就可以複製 ＠keyframes 的內容！

貼回 menu-item 的指令中，opacity 在 0% 和 100% 後改為 1 即可。

欸嘿～歡呼～大功告成啦～～～

對於 css 動畫很有幫助的一篇文章：

完整解析 CSS 動畫 ( CSS Animation )

每次都只照著蓋瑞的案例做就會覺得不甘心，所以總是手癢想要更改一下內容，其實我蠻喜歡這次的作品，但是動畫的問題讓我有點煩躁以及肩頸痠痛，所以先放過你一馬！