https://github.com/OutSystems/AutoAnimations

Automatically animate all inserted and removed DOM elements
https://github.com/OutSystems/AutoAnimations

snyk-archive

Last synced: 11 days ago
JSON representation

Automatically animate all inserted and removed DOM elements

• Host: GitHub
• URL: https://github.com/OutSystems/AutoAnimations
• Owner: OutSystems
• License: mit
• Archived: true
• Created: 2015-11-22T22:07:09.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2018-01-06T11:52:36.000Z (almost 7 years ago)
• Last Synced: 2024-08-02T05:19:38.558Z (3 months ago)
• Topics: snyk-archive
• Language: JavaScript
• Size: 14.6 KB
• Stars: 395
• Watchers: 12
• Forks: 12
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# AutoAnimations

_"It's like auto-tune for web pages"_

Automatically animate all inserted and removed DOM elements with good defaults:

- 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:

    - 
javascript:(function(){document.styleSheets[0].insertRule("* {animation-duration: .2s}", 0);document.body.appendChild(document.createElement('script')).src='https://rawgit.com/OutSystems/AutoAnimations/master/AutoAnimations.js';})();

- This overrides HTMLElement prototype methods, so it's a huge hack (only a POC) and there might be several side effects. 


####EXCEPTIONS

If you don't want some element to automatically animate (e.g. external libraries) just set its animation-duration to 0s, e.g. :

.SomeCustomComponent, .SomeCustomComponent * {animation-duration: 0s; }