【JS30-5】Flex Panels Image Gallery

閱讀時間約 1 分鐘
raw-image


JavaScript30 傳送門:https://javascript30.com/


挑戰5透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果,看別人的成果:yhabib.github.io



本次練習の心得:

  1. 製造過度效果延遲的方法:transition-delay V.S. transitionend
    在完成作品網頁可以看到本次挑戰中,點擊卡片時,上下排的字 in & out 都有延遲。
    如果有明確的延遲秒數,可以透過 transition-delay 來解決,這也是我原本想的。但教學影片用 transitionend 事件來觸發上下排字的進退場,這樣一來:
    (1) 不用計算延遲的秒數
    (2) 可以準確指定在哪一個 transition 結束時啟動 function



以上,只有一個心得,有緣再見 (୨୧•͈ᴗ•͈)


    1會員
    6內容數
    肚子餓了
    留言0
    查看全部
    發表第一個留言支持創作者!
    hunwooooof 的其他內容
    JavaScript30 傳送門:https://javascript30.com/ Console.table 第四個練習是透過一些 array method 來操作 array 資料。 整個練習最讓我 WOW 的,是 console.table,竟然有這麼酷的 console
    JavaScript30 傳送門:https://javascript30.com/ 透過 JS 控制 CSS 變數 今天的挑戰是要能透過滑動圖片上面的 <input type="range"> 來改變圖片的三個屬性。 以前在 CSS 裡面看到 var(--xxxx) 這種東西都很
    JavaScript30 傳送門:https://javascript30.com/ 今天才發現可以不用看著影片一步一步寫,可以自己先寫寫看😛 第二個挑戰是用 JS + CSS 寫一個時鐘,不過其實檔案裡面 HTML 跟 CSS 都已經寫好了,三個指針也都放好了,Go Live 起來就長
    想要找個地方記錄自己寫 JavaScript 30 挑戰時額外的小筆記✍🏻 JavaScript30 傳送門:https://javascript30.com/ 第一個挑戰是寫一個 keydown 事件並讓頁面隨著不同的按鍵發出不同的聲音。
    JavaScript30 傳送門:https://javascript30.com/ Console.table 第四個練習是透過一些 array method 來操作 array 資料。 整個練習最讓我 WOW 的,是 console.table,竟然有這麼酷的 console
    JavaScript30 傳送門:https://javascript30.com/ 透過 JS 控制 CSS 變數 今天的挑戰是要能透過滑動圖片上面的 <input type="range"> 來改變圖片的三個屬性。 以前在 CSS 裡面看到 var(--xxxx) 這種東西都很
    JavaScript30 傳送門:https://javascript30.com/ 今天才發現可以不用看著影片一步一步寫,可以自己先寫寫看😛 第二個挑戰是用 JS + CSS 寫一個時鐘,不過其實檔案裡面 HTML 跟 CSS 都已經寫好了,三個指針也都放好了,Go Live 起來就長
    想要找個地方記錄自己寫 JavaScript 30 挑戰時額外的小筆記✍🏻 JavaScript30 傳送門:https://javascript30.com/ 第一個挑戰是寫一個 keydown 事件並讓頁面隨著不同的按鍵發出不同的聲音。
    你可能也想看
    Google News 追蹤
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
    Thumbnail
    Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
    Thumbnail
    文、圖/傑思·愛德威提供   農曆新年將至,家家戶戶開始辦年貨,傑思·愛德威直接把年貨大街搬到公司,提前感受滿滿年味。「JS年貨大街」一條龍包辦過年會遇到的所有「吃」「喝」「玩」「樂」,像是除夕圍爐必吃的佛跳牆、拜年伴手禮、美妝保養品、果乾零嘴、醫美療程、旅遊行程等,通通都能在JS年貨大街一網
    Thumbnail
    本次的挑戰是「CSS Variables」,需要達成的目標是:「使用者操作拉桿或是選色器時,底下圖片的樣式會有對應的變化。」
    Thumbnail
    本次的挑戰是「CSS + JS Clock」,需要達成的目標是:「時鐘的指針會轉動,指針都必須依據現實時鐘的規則前進。」這次需要搭配 CSS 動畫,製作時鐘的指針旋轉效果。
    Thumbnail
    這系列文章會記錄 JS 30 當次挑戰時使用到的語法和相關知識。JS 30 官方有提供所有製作網頁的資源,不需要任何事前準備,就能無痛開始撰寫 JS,寫完之後還有 JS 30 作者提供的解答,不知道怎麼下手時可以參考、寫完之後也能了解更多解法,改善自己的寫法。
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
    Thumbnail
    Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
    Thumbnail
    文、圖/傑思·愛德威提供   農曆新年將至,家家戶戶開始辦年貨,傑思·愛德威直接把年貨大街搬到公司,提前感受滿滿年味。「JS年貨大街」一條龍包辦過年會遇到的所有「吃」「喝」「玩」「樂」,像是除夕圍爐必吃的佛跳牆、拜年伴手禮、美妝保養品、果乾零嘴、醫美療程、旅遊行程等,通通都能在JS年貨大街一網
    Thumbnail
    本次的挑戰是「CSS Variables」,需要達成的目標是:「使用者操作拉桿或是選色器時,底下圖片的樣式會有對應的變化。」
    Thumbnail
    本次的挑戰是「CSS + JS Clock」,需要達成的目標是:「時鐘的指針會轉動,指針都必須依據現實時鐘的規則前進。」這次需要搭配 CSS 動畫,製作時鐘的指針旋轉效果。
    Thumbnail
    這系列文章會記錄 JS 30 當次挑戰時使用到的語法和相關知識。JS 30 官方有提供所有製作網頁的資源,不需要任何事前準備,就能無痛開始撰寫 JS,寫完之後還有 JS 30 作者提供的解答,不知道怎麼下手時可以參考、寫完之後也能了解更多解法,改善自己的寫法。