【JS30-5】Flex Panels Image Gallery
閱讀時間約 1 分鐘
JavaScript30 傳送門：https://javascript30.com/
挑戰５透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果，看別人的成果：yhabib.github.io
本次練習の心得：
- 製造過度效果延遲的方法：transition-delay V.S. transitionend
在完成作品網頁可以看到本次挑戰中，點擊卡片時，上下排的字 in & out 都有延遲。
如果有明確的延遲秒數，可以透過transition-delay來解決，這也是我原本想的。但教學影片用 transitionend 事件來觸發上下排字的進退場，這樣一來：
(1) 不用計算延遲的秒數
(2) 可以準確指定在哪一個 transition 結束時啟動 function
以上，只有一個心得，有緣再見 (୨୧•͈ᴗ•͈)
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
文、圖／傑思·愛德威提供
農曆新年將至，家家戶戶開始辦年貨，傑思·愛德威直接把年貨大街搬到公司，提前感受滿滿年味。「JS年貨大街」一條龍包辦過年會遇到的所有「吃」「喝」「玩」「樂」，像是除夕圍爐必吃的佛跳牆、拜年伴手禮、美妝保養品、果乾零嘴、醫美療程、旅遊行程等，通通都能在JS年貨大街一網
JavaScript callback, promise, async-await
本次的挑戰是「CSS Variables」，需要達成的目標是：「使用者操作拉桿或是選色器時，底下圖片的樣式會有對應的變化。」
本次的挑戰是「CSS + JS Clock」，需要達成的目標是：「時鐘的指針會轉動，指針都必須依據現實時鐘的規則前進。」這次需要搭配 CSS 動畫，製作時鐘的指針旋轉效果。
這系列文章會記錄 JS 30 當次挑戰時使用到的語法和相關知識。JS 30 官方有提供所有製作網頁的資源，不需要任何事前準備，就能無痛開始撰寫 JS，寫完之後還有 JS 30 作者提供的解答，不知道怎麼下手時可以參考、寫完之後也能了解更多解法，改善自己的寫法。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
文、圖／傑思·愛德威提供
農曆新年將至，家家戶戶開始辦年貨，傑思·愛德威直接把年貨大街搬到公司，提前感受滿滿年味。「JS年貨大街」一條龍包辦過年會遇到的所有「吃」「喝」「玩」「樂」，像是除夕圍爐必吃的佛跳牆、拜年伴手禮、美妝保養品、果乾零嘴、醫美療程、旅遊行程等，通通都能在JS年貨大街一網
JavaScript callback, promise, async-await
本次的挑戰是「CSS Variables」，需要達成的目標是：「使用者操作拉桿或是選色器時，底下圖片的樣式會有對應的變化。」
本次的挑戰是「CSS + JS Clock」，需要達成的目標是：「時鐘的指針會轉動，指針都必須依據現實時鐘的規則前進。」這次需要搭配 CSS 動畫，製作時鐘的指針旋轉效果。
這系列文章會記錄 JS 30 當次挑戰時使用到的語法和相關知識。JS 30 官方有提供所有製作網頁的資源，不需要任何事前準備，就能無痛開始撰寫 JS，寫完之後還有 JS 30 作者提供的解答，不知道怎麼下手時可以參考、寫完之後也能了解更多解法，改善自己的寫法。