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

Builds Materialize distribution packages

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

    <div class="col s12 m9 l10">

      <div id="scale" class="section scrollspy">
        <p class="caption">We've made some custom animation classes that will transition your content with only CSS. Each CSS transition consists of a base class that applies the necessary styles and additional classes that control the state of the transition.</p>

        <h4>Scale</h4>
        <p>Use this scale in and out elements. Make sure to add the base transition class <code class="language-markup">scale-transition</code>. Then add the class <code class="language-markup">scale-out</code> to scale the element down until it is hidden. To start something as hidden, add the class <code class="language-markup">scale-out</code> first, and then add the class <code class="language-markup">scale-in</code> to scale the element up until it is shown.</p>

        <a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition"><i class="material-icons">add</i></a>

        <a id="scale-demo-trigger" href="#!" class="btn right">Toggle Scale</a>

        <pre><code class="language-markup">
  &lt;!-- Scaled in -->
  &lt;a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition">
    &lt;i class="material-icons">add&lt;/i>
  &lt;/a>

  &lt;!-- Scaled out -->
  &lt;a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition scale-out">
    &lt;i class="material-icons">add&lt;/i>
  &lt;/a>
  </code></pre>
      </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="#scale">Scale</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>