好用的 CSShake - 製造晃動的動畫效果

有時候希望在使用 ajax捉資料時可以跟使用者互動，一般是將滑鼠的狀態作改變

但是也可以用一些動畫來顯示，像 CSShake就可以達到我的要求

只要套用 csshake.min.css，然後再要套用的 element上 class加上比如 shake shake-little (小震動)

就可以囉，真是方便。



CSShake

CSShake Github

bootstrap 使用css transform後會造成 nav bar閃爍(flicker)的問題 in chrome

參考文件：Prevent flicker on webkit-transition of webkit-transform

因為實作CSS Animation - 以小米為師時，發現只要移動滑鼠滾輪時，bootstrap nav bar就會一閃一閃的，眼睛很不舒服，可是在 IE 11上就沒這個問題，這是因為 css使用了 -webkit-transform  造成的，解決方式就是在 body內加上 -webkit-backface-visibility : hidden; 即可

$(window).scrollTop() 的值都為 0

因為之前為了要解決一個問題 開啟 bootstrap modal會造成首頁內容左移 (shit to left)，css 設定如下

html {
  overflow: hidden;
  height: 100%;}

因為把 height設為 100%，所以捉取到的值永遠都是 0，但為了作到動畫效果  CSS Animation - 以小米為師   ，所以只好又把它修改回來。

CSS Animation - 以小米為師

參考網站
优秀网站看前端 —— 小米Note介绍页面
小米電源官網

bootstrap model開啟後馬上又自動關閉

相關文章：Bootstrap Modal immediately disappearing

剛好我就是這個原因，因為我是使用 asp.net mvc開發
不小心使用了 script.render載入了兩次 bootstrap.js，後來拿掉後就沒有這個問題了

開啟 bootstrap modal會造成首頁內容左移 (shit to left)

解決方式 Twitter Bootstrap modal pushes html content to the left

主要的作法就是在 css加上如下內容

html {
  overflow: hidden;
  height: 100%;}
body {
  overflow: auto;
  height: 100%;}

/* unset bs3 setting */.modal-open {
 overflow: auto; 
}

ASP.Net MVC 5使用 bootstrap 3 typeahead和 modal實作電話查詢