AngularMotion
Fancy CSS3 animations for AngularJS 1.2+.
Fancy CSS3 animations for AngularJS 1.2+.
mgcrea.ngMotion
AngularMotion is an animation starter-kit built for AngularJS#^1.2.
Wt's a spin off from AngularStrap v2 release work.
Install and manage AngularMotion with Bower.
$ bower install angular-motion --save
Load the required javascript libraries.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.min.js"></script>
<link rel="stylesheet" href="bower_components/angular-motion/dist/angular-motion.min.css">
AngularMotion provides independently built modules that can be loaded separately
<link rel="stylesheet" href="bower_components/angular-motion/dist/modules/collapse.min.css">
Build and work on AngularMotion with Gulp.
// Serve and watch docs, ideal to hack!
$ gulp serve
// Build AngularMotion
$ gulp build
mgcrea.ngMotion.fade
Basic fade animation that leverages CSS3 keyframes, see browser support.
This animation works with opacity animating respectively from 0 to 1.
Append one of theses classes am-fade to enable theses transitions.
You should use the data-animation attribute with AngularStrap.
mgcrea.ngMotion.slide
Basic slide animation that leverages CSS3 keyframes, see browser support.
This animation works with translateX/Y animating from 0% to 100%.
Append one of theses classes am-slide-top, am-slide-right, am-slide-bottom, am-slide-left to enable theses transitions,
You should use the data-animation attribute with AngularStrap.
mgcrea.ngMotion.collapse
Basic collapse animation that leverages CSS3 keyframes, see browser support.
This animation works with opacity animating respectively from 0 to 1.
Append one of theses classes am-collapse to enable theses transitions.
You should use the data-animation attribute with AngularStrap.
mgcrea.ngMotion.fade-and-slide
Fancy slide animation that leverages CSS3 keyframes, see browser support.
This animation works with translateX/Y, opacity animating respectively from 0% to 20%, 0 to 1.
Append one of theses classes am-fade-and-slide-top, am-fade-and-slide-right, am-fade-and-slide-bottom, am-fade-and-slide-left to enable theses transitions.
You should use the data-animation attribute with AngularStrap.
mgcrea.ngMotion.fade-and-scale
Fancy scale animation that leverages CSS3 keyframes, see browser support.
This animation works with scale, opacity animating respectively from .7 to 1, 0 to 1.
Append one of theses classes am-fade-and-scale to enable theses transitions.
You should use the data-animation attribute with AngularStrap.
mgcrea.ngMotion.flip
Fancy flip animation that leverages CSS3 keyframes, see browser support.
This animation works with perspective, rotate animating respectively from to 400px, 90 to 0.
Append one of theses classes am-flip-x to enable theses transitions.
You should use the data-animation attribute with AngularStrap.