angular-motion/src/fade-and-slide/docs/fade-and-slide.demo.html

AngularMotion - Fancy CSS3 animations for AngularJS

<div class="bs-docs-section">

  <div class="page-header">
    <h1 id="fade-and-slide">FadeAndSlide <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/src/fade-and-slide/fade-and-slide.less" target="_blank">fade-and-slide.less</a></h1>
    <code>mgcrea.ngMotion.fade-and-slide</code>
  </div>

  <p>Fancy slide 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>translateX/Y, opacity</code> animating respectively from <code>0% to 20%, 0 to 1</code>.</p>

  <h3 id="fade-and-slide-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-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>

  </div>


  <h2 id="fade-and-slide-usage">Usage</h2>
  <p>Append one of theses classes <code>am-fade-and-slide-top</code>, <code>am-fade-and-slide-right</code>, <code>am-fade-and-slide-bottom</code>, <code>am-fade-and-slide-left</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>