讓所有插入和刪除DOM元素自動產生動畫:AutoAnimations

jopen 9年前發布 | 11K 次閱讀 JavaScript開發 AutoAnimations

讓所有插入和刪除DOM元素自動產生動畫,并具有以下一些默認:

  • Slide down/up for elements with display=block & position=static
  • Fade in/out for all others
  • Elements with existing CSS transitions or animations will be left alone
  • Uses velocity.js to assure smooth 60fps animations even in mobile

compare with http://todomvc.com/examples/react/ (that has no autoanimate)

USAGE

Just include this script, and add an animation-duration to your css, e.g.

* { 
    animation-duration: .2s; 
}

NOTES

  • Elements shown/hidden using the style's display (e.g. jquery's show, hide and toggle) will not be animated.
  • In javascript UI frameworks (e.g. React) it's recommended that this script is run after first render
  • You can add this as the URL of a bookmark to create a bookmarklet to test it in any web page:
  • This overrides HTMLElement prototype methods, so it's a huge hack (only a POC) and there might be several side effects.

項目主頁:http://www.baiduhome.net/lib/view/home/1448850586592

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!