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

AngularMotion - Fancy CSS3 animations for AngularJS

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

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

  <p>Basic 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</code> animating from <code>0% to 100%</code>.</p>

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

  </div>


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