materialize-css/jade/page-contents/transitions_content.html

Builds Materialize distribution packages

<div class="container">
  <div class="row">

    <div class="col s12 m9 l10">

      <div id="staggered" class="section scrollspy">
        <p class="caption">We've made some custom animation functions that will transition your content. It's recommended to use this with our <a href="/scrollfire.html">ScrollFire Plugin</a> to make your content transition in as you scroll.</p>

        <h4>showStaggeredList</h4>
        <p>Use this to create a staggered reveal effect for any <code class="language-markup">UL</code> Tag with list items. Just make sure the list items in the <code class="language-markup">UL</code> are <code class="language-css">opacity: 0; to ensure the animation works correctly.</code></p>

        <table class="highlight">
          <thead>
            <tr>
                <th>Option Name</th>
                <th>Description</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>SelectorOrEl</td>
              <td>The selector or element that the transition targets.</td>
            </tr>
          </tbody>
        </table>
        <br>

        <a href="#!" class="btn" onclick="Materialize.showStaggeredList('#staggered-test')">Click Me</a>
        <pre><code class="language-markup">
  &lt;a href="#!" class="btn" onclick="Materialize.showStaggeredList('#staggered-test')">Click Me&lt;/a>
        </code></pre>
        <ul id="staggered-test">
          <li>
            <h4><a href="#">List Item</a></h4>
            <p>This is a description</p>
          </li>
          <li>
            <h4><a href="#">List Item</a></h4>
            <p>This is a description</p>
          </li>
          <li>
            <h4><a href="#">List Item</a></h4>
            <p>This is a description</p>
          </li>
          <li>
            <h4><a href="#">List Item</a></h4>
            <p>This is a description</p>
          </li>
          <li>
            <h4><a href="#">List Item</a></h4>
            <p>This is a description</p>
          </li>
        </ul>
      </div>

      <div id="fadeImage" class="section scrollspy">
        <h4>fadeInImage</h4>
        <p>Use this to fade in images. It also animates grayscale and brightness to give it a unique effect.</p>

        <table class="highlight">
          <thead>
            <tr>
                <th>Option Name</th>
                <th>Description</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>SelectorOrEl</td>
              <td>The selector or element that the transition targets.</td>
            </tr>
          </tbody>
        </table>
        <br>

        <a href="#!" class="btn" onclick="Materialize.fadeInImage('#image-test')">Click Me</a>
        <pre><code class="language-markup">
  &lt;a href="#!" class="btn" onclick="Materialize.fadeInImage('#image-test')">Click Me&lt;/a>
        </code></pre>
        <img id="image-test" class="responsive-img" src="https://unsplash.imgix.net/reserve/nE6neNVdRPSIasnmePZe_IMG_1950.jpg?dpr=1.25&fit=crop&fm=jpg&h=700&q=75&w=1050">
      </div>
    </div>

    <div class="col hide-on-small-only m3 l2">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li><a href="#staggered">showStaggeredList</a></li>
            <li><a href="#fadeImage">Materialize.fadeInImage</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>