angular-motion
Version:
AngularMotion - Fancy CSS3 animations for AngularJS
36 lines (23 loc) • 1.97 kB
HTML
<div class="bs-docs-section">
<div class="page-header">
<h1 id="fade">Fade <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/src/fade/fade.less" target="_blank">fade.less</a></h1>
<code>mgcrea.ngMotion.fade</code>
</div>
<p>Basic fade animation that leverages <code>CSS3 keyframes</code>, see <a href="http://caniuse.com/#search=keyframes" target="_blank">browser support</a>.</p>
<p>This animation works with <code>opacity</code> animating respectively from <code>0 to 1</code>.</p>
<h3 id="fade-examples">Live demo <a class="small edit-plunkr" data-module-name="mgcrea.ngStrapDocs" data-content-html-url="aside/docs/aside.demo.html" data-content-js-url="aside/docs/aside.demo.js" ng-plunkr data-title="edit in plunker" data-placement="right" bs-tooltip></a></h3>
<!-- <pre class="bs-example-scope">$scope.aside = {{aside | json}};</pre> -->
<div class="bs-example" append-source>
<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>
</div>
<h2 id="fade-usage">Usage</h2>
<p>Append one of theses classes <code>am-fade</code> to enable theses transitions.</p>
<div class="callout callout-info">
<h4>AngularStrap integration</h4>
<p>You should use the <code>data-animation</code> attribute with AngularStrap.</p>
</div>
</div>