Lichin

contact: [email protected]

I am

# 起因

有鑒於每一次寫好一份css檔,都無法沿用到下一次開發,或是整個架構需要大修改, 我竟然在腦中浮現出 “不然做成模組化吧” 的想法。另外,也在看過 sweetalert 之後,對於類似的動畫很有興趣,於是就開始著手製作這個套件。

# demo

Juliealert


# 製作心得

css preprocessor-Stylus

        preprocessor可以說是開發css時所必備的工具,避免重複寫一樣的class-name,改以巢狀式的coding style, 讓開發減少複雜性以及加快速率。另外,這些preprocessor還加入變數variable、函式functions…等等十分好用的新功能,為傳統的css打造更方便的開發方式。
        筆者所使用的preprocessor是stylus這一套,這裡也提供將其轉成css的方式:。希望還沒接觸的人也可以嘗試看看另外:SASSLESS

animation-keyframe介紹

        animation用來描述一段動畫的起始、結束、還有運行時間函式等等。其中@keyframe是更仔細敘述動畫的呈現方式,以下是基本樣式:

See the Pen Animations Keyframes by lichin-lin (@lichin-lin) on CodePen.

stop the scrolling

        在pop out動畫出現時,要能夠順利停止scrolling event。 方法是:在欲停止捲動的div加上overflow:hidden 就可以成功達到效果。 但如果要讓彈出式闖可以捲動請參考:Prevent body scrolling but ALLOW overlay scrolling這篇文章裡頭有詳細的介紹,

javascript/css minify

        當開發專案的css、js file開始肥起來後,免不了會影響讀取網頁的速度,進而讓使用著感受到不便。這邊有提供線上minify的方式:minifier.org。 另外,也有一套名為webpack的工具,筆者目前還在研究它的使用方法,也許下一次就可以跟大家做個小分享。

# 參考

  1. 週末長知識: Facebook’s “theater” View
  2. sweetalert-github


blog comments powered by Disqus

Published

19 March 2016

Tags

title

yo! trying to alert