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
.
<h5>fade</h5>
<button type="button" class="btn btn-primary" data-animation="am-fade" data-placement="left" bs-popover="popover">popover from left<br><small>(am-fade)</small></button>
<button type="button" class="btn btn-success" data-animation="am-fade" data-placement="right" bs-popover="popover">popover from right<br><small>(am-fade)</small></button><br><br>
<button type="button" class="btn btn-primary" data-animation="am-fade" data-placement="top" bs-tooltip="tooltip">tooltip from top<br><small>(am-fade)</small></button>
<button type="button" class="btn btn-success" data-animation="am-fade" data-placement="bottom" bs-tooltip="tooltip">tooltip from bottom<br><small>(am-fade)</small></button>
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%
.
<h5>slide</h5>
<button type="button" class="btn btn-primary" data-animation="am-slide-left" data-placement="left" bs-aside="aside">aside from left<br><small>(slide-left)</small></button>
<button type="button" class="btn btn-success" data-animation="am-slide-right" data-placement="right" bs-aside="aside">aside from right<br><small>(slide-right)</small></button>
<button type="button" class="btn btn-primary" data-animation="am-slide-top" bs-modal="modal">modal from top<br><small>(am-slide-top)</small></button>
<button type="button" class="btn btn-success" data-animation="am-slide-bottom" data-placement="center" bs-modal="modal">modal from bottom<br><small>(am-slide-bottom)</small></button>
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
.
<div class="panel-group" role="tablist" aria-multiselectable="true" bs-collapse>
<div class="panel panel-default" ng-repeat="panel in panels">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a bs-collapse-toggle>
{{ panel.title }}
</a>
</h4>
</div>
<div class="panel-collapse" role="tabpanel" bs-collapse-target>
<div class="panel-body">
{{ panel.body }}
</div>
</div>
</div>
</div>
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
.
<h5>fade-and-slide</h5>
<button type="button" class="btn btn-primary" data-animation="am-fade-and-slide-left" data-placement="left" bs-aside="aside">aside from left<br><small>(am-fade-and-slide-left)</small></button>
<button type="button" class="btn btn-success" data-animation="am-fade-and-slide-right" data-placement="right" bs-aside="aside">aside from right<br><small>(am-fade-and-slide-right)</small></button><br><br>
<button type="button" class="btn btn-primary" data-animation="am-fade-and-slide-top" bs-modal="modal">modal from top<br><small>(am-fade-and-slide-top)</small></button>
<button type="button" class="btn btn-success" data-animation="am-fade-and-slide-bottom" data-placement="center" bs-modal="modal">modal from bottom<br><small>(am-fade-and-slide-bottom)</small></button>
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
.
<h5>fade-and-scale</h5>
<button type="button" class="btn btn-danger" data-animation="am-fade-and-scale" data-placement="center" bs-modal="modal">modal from center<br><small>(am-fade-and-scale)</small></button>
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
.
<h5>flip</h5>
<button type="button" class="btn btn-primary" data-animation="am-flip-x" data-placement="bottom" bs-popover="popover">popover from bottom<br><small>(am-flip-x)</small></button>
<button type="button" class="btn btn-success" data-animation="am-flip-x" data-placement="center" bs-modal="modal">modal from center<br><small>(am-flip-x)</small></button>
Append one of theses classes am-flip-x
to enable theses transitions.
You should use the data-animation
attribute with AngularStrap.