office-ui-fabric-core/src/documentation/pages/Animations/index.html

The front-end framework for building experiences for Office 365.

@@include('../../templates/modules/components/DocumentationPageHeader.html')
<div class="docs-Styles-section" id="animations">
  <h2>Animations</h2>
  <p>Use the animation library to create web experiences that integrate with Office 365. You can use the animation CSS classes for navigation, panels, dialogs, and more. Animations include directionality (up, down, left, right relating to origin and completion of tasks), enter/exit (fade in, fade out, zoom in, zoom out), and duration (speed of enter/exit relating to urgency or content type).</p>
  <p>When choosing a motion for side panels, consider the origin of the triggering element. Use the motion to create a link between the action and the resulting UI. For example, if the triggering element is on the right side of the interface, consider having the panel move in from the right.</p>
  <p>When choosing a motion for dialogs, consider the origin and tone of the content. For a warning or error dialog, a quick fade in might be appropriate. If the dialog appears when a user chooses an item to get more information, a scale-up might be appropriate.</p>
  <div class="docs-animationsTable" role="table">
    <!-- Header Row -->
    <div class="docs-animationsTable-header ms-Grid-row" role="row">
      <div class="ms-Grid-col ms-sm12 ms-md4 ms-xl2 ms-font-l docs-subHeading ms-fontWeight-semibold docs-animationClassColumn" role="columnheader">CSS Class</div>
      <div class="ms-Grid-col ms-sm12 ms-md3 ms-xl2 ms-font-l docs-subHeading ms-fontWeight-semibold docs-animationDescriptionColumn" role="columnheader">Description</div>
      <div class="ms-Grid-col ms-xl3 ms-font-l docs-subHeading ms-fontWeight-semibold docs-animationCubicColumn" role="columnheader">Cubic Bezier</div>
      <div class="ms-Grid-col ms-xl1 ms-font-l docs-subHeading ms-fontWeight-semibold docs-animationTimingColumn" role="columnheader">Timing</div>
      <div class="ms-Grid-col ms-md5 ms-xl4 ms-font-l docs-subHeading ms-fontWeight-semibold docs-animationExampleColumn" role="columnheader">Example (Click to Animate)</div>
    </div>
    <!-- End Header Row -->

    {{#each AnimationModel.items}}
      {{> AnimationExample this }}
    {{/each}}
  </div>
</div>
<script type="text/javascript">

  function wireAnimations() {
      var animationSample = document.querySelectorAll('.AnimationExample');

      for (var i = 0; i < animationSample.length; i++) {
          animationSample[i].addEventListener('click', function(event) {
            var sample = this;
            var panel = sample.querySelector('.AnimationExample-panel');
            var sampleData = sample.dataset;
            var cssClass = sampleData.class;

            panel.classList.add(cssClass);

            setTimeout(function () {
              panel.classList.remove(cssClass);
            }, 1000);          

            event.preventDefault();
          });
      }            
  }

    setTimeout(function() {
    wireAnimations();
    }, 1000); 

  </script>
@@include('../../templates/modules/components/DocumentationPageFooter.html')