formstone/src/docs/transition.html

Library of modular front end components.

<h4>Basic</h4>

<!-- START: FIRSTDEMO -->

<style>
  .transitions { margin: 0 0 20px; }
  .transition_track { background: #fff; border: 1px solid #455a64; margin: 20px 0; }
  .transition { background-color: #00bcd4; height: 30px; width: 10%;
    -webkit-transition: margin 0.5s ease, height 0.5s linear 0.5s;
        transition: margin 0.5s ease, height 0.5s linear 0.5s;
  }
  .transition.move { margin-left: 90%; }
  .transition_property.move {
    height: 50px;
  }

  .output { display: inline-block; margin: 0 0 0 10px; }
</style>

<script>
  Formstone.Ready(function() {
    $(".transition_basic").transition({
      always: true
    }, complete);

    $(".transition_parent").transition({
      always: true,
      target: ".transition_delegate"
    }, complete);

    $(".transition_property").transition({
      always: true,
      property: "height"
    }, complete);

    $(".trigger").on("click", start);
  });

  function start() {
    var $target = $(this).parent(".transitions").find(".transition");

    if (!$target.hasClass("animating")) {
      $target.toggleClass("move")
           .addClass("animating");

      output($target, " ");
    }
  }

  function complete() {
    var $target = $(this);

    if (!$target.hasClass("transition")) {
      $target = $(this).find(".transition");
    }

    $target.removeClass("animating");
    output($target, "Complete");
  }

  function output($target, text) {
    $target.parents(".transitions").find(".output").text(text);
  }
</script>

<div class="demo_container">
  <div class="demo_example">
    <div class="transitions">
      <div class="transition_track">
        <div class="transition transition_basic"></div>
      </div>
      <button class="button trigger">Start</button>
      <div class="output">&nbsp;</div>
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;div class=&quot;transition_target&quot;&gt;&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".transition_target").transition({
  always: true
}, function() {
  // Tranition complete...
}).addClass("active");</code></pre>
    <pre><code class="language-css">.transition_target {
  background: black;
  transition: background 0.25s;
}

.transition_target.active {
  background: blue;
}</code></pre>
  </div>
</div>


<!-- END: FIRSTDEMO -->

<h4>Delegation</h4>
<div class="demo_container">
  <div class="demo_example">
    <div class="transitions">
      <div class="transition_track transition_parent">
        <div class="transition transition_delegate"></div>
      </div>
      <button class="button trigger">Start</button>
      <div class="output">&nbsp;</div>
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;div class=&quot;transition_target&quot;&gt;
&Tab;&lt;div class=&quot;transition_child&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".transition_target").transition({
  always: true,
  target: ".transition_child"
}, function() {
  // Tranition complete...
}).addClass("active");</code></pre>
    <pre><code class="language-css">.transition_target .transition_child {
  background: black;
  transition: background 0.25s;
}

.transition_target.active .transition_child {
  background: blue;
}</code></pre>
  </div>
</div>

<h4>Property</h4>
<div class="demo_container">
  <div class="demo_example">
    <div class="transitions">
      <div class="transition_track">
        <div class="transition transition_property"></div>
      </div>
      <button class="button trigger">Start</button>
      <div class="output">&nbsp;</div>
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;div class=&quot;transition_target&quot;&gt;&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".transition_target").transition({
  always: true,
  property: "height"
}, function() {
  // Tranition complete...
}).addClass("active");</code></pre>
    <pre><code class="language-css">.transition_target {
  background: black;
  height: 10px;
  transition:
    background 0.25s linear 0s,
    height 0.25s linear 1s;
}

.transition_target.active {
  background: blue;
  height: 30px;
}</code></pre>
  </div>
</div>