Angular Fx adapts the Animate.css library so it can be used within AngularJS-powered applications.
This incredible useful toolkit developed by Dan Eden allows developers to easily trigger and run CSS3-based animations through the usage of simple CSS classes.
The Angular Fx directive does the same thing, only it adapts those CSS classes into custom "ng" attributes, a staple of AngularJS-based development.
Besides the attributes telling the page element what animation routine to use, there are also attributes to control the animation's playback speed, if to show in a continuous loop, or to hide/show the element at page load.
Examples and usage instructions are included with the download package.
Supported animation routines:
ngfx-flash
ngfx-pulse
ngfx-rubber-band
ngfx-shake
ngfx-swing
ngfx-tada
ngfx-wobble
ngfx-bounce-in
ngfx-bounce-in-down
ngfx-bounce-in-left
ngfx-bounce-in-right
ngfx-bounce-in-up
ngfx-bounce-out
ngfx-bounce-out-down
ngfx-bounce-out-left
ngfx-bounce-out-right
ngfx-bounce-out-up
ngfx-fade-in
ngfx-fade-in-down
ngfx-fade-in-down-big
ngfx-fade-in-left
ngfx-fade-in-left-big
ngfx-fade-in-right
ngfx-fade-in-right-big
ngfx-fade-in-up
ngfx-fade-in-up-big
ngfx-fade-out
ngfx-fade-out-down
ngfx-fade-out-down-big
ngfx-fade-out-left
ngfx-fade-out-left-big
ngfx-fade-out-right
ngfx-fade-out-right-big
ngfx-fade-out-up
ngfx-fade-out-up-big
ngfx-flip
ngfx-flip-in-x
ngfx-flip-in-y
ngfx-flip-out-x
ngfx-flip-out-y
ngfx-light-speed-in
ngfx-light-speed-out
ngfx-rotate-in
ngfx-rotate-in-up-left
ngfx-rotate-in-up-right
ngfx-rotate-in-down-left
ngfx-rotate-in-down-right
ngfx-rotate-out
ngfx-rotate-out-up-left
ngfx-rotate-out-up-right
ngfx-rotate-out-down-left
ngfx-rotate-out-down-right
ngfx-hinge
ngfx-roll-in
ngfx-roll-out
ngfx-zoom-in
ngfx-zoom-in-down
ngfx-zoom-in-left
ngfx-zoom-in-right
ngfx-zoom-in-up
ngfx-zoom-out
ngfx-zoom-out-down
ngfx-zoom-out-left
ngfx-zoom-out-right
ngfx-zoom-out-up
What is new in this release:
- Swing and hinge fix.
What is new in version 1.0.0:
- Swing and hinge fix.
Requirements:
- JavaScript enabled on client side
- AngularJS 1.2 or higher
- CSS 3 enabled browser
Kommentarer ikke fundet