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

AngularMotion - Fancy CSS3 animations for AngularJS

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

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

  <p>Fancy flip 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>perspective, rotate</code> animating respectively from <code>to 400px, 90 to 0</code>.</p>

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

  </div>


  <h2 id="flip-usage">Usage</h2>
  <p>Append one of theses classes <code>am-flip-x</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>