再次回歸基礎!利用vanilla.js打造記憶卡app!(30 Days challenge-16)

前言

記得我剛開始學習CSS/HTML的時候,動畫相關屬性一直是我避之唯恐不及的東西,之後在各種的專案開發上雖然多少有用到動畫的效果,不過那大都是利用別人寫好的函式庫或套件達成的效果。今天就從頭自己做出翻轉卡片的效果,不得不說差點沒搞死我,動畫的屬性實在是不太熟練,花了比預期多了太多的時間,怪不得別人會開發vue-filp-card這樣的東西給大家省麻煩!

專案介紹

這是一個簡單的記憶卡程式,每一張卡片都會有一個問題&一個答案,點擊便可以翻轉卡片。卡片的資料我是存在localstorage內,所以即使離開頁面後再重返還是會看到你剛建立的卡片,若想要清除所有暫存的資料,請點擊左下的清理按鈕。

專案預覽

專案連結

github
demo

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s