title: Incremental transition-delay for appended items
body: <p>I have a page using infinite-scroll.js, which loads 8 <code>.product</code> div on initial load (and adds a <code>.loaded</code> class), and then a further 8 <code>.product</code> div upon clicking a button to run infinite-scroll (which adds an <code>.appended</code> class to each).</p>
  
  <p>I am trying to add incremental <code>transition-delay</code> to each <code>.product</code> (first 100ms, second 200ms, third 300ms and so on), but to only take effect as and when they are added to the DOM. The code I'm currently using adds a <code>transition-delay</code> to all <code>.product</code> div's using <code>:nth-child()</code>, which means that when appending the additional items, they have a long <code>transition-delay</code>. For example, the first appended item currently uses i.e <code>:nth:child(9)</code> (so has a long delay of 900ms), but I want the transition-delay loop to start over, i.e <code>:nth-child(1)</code> (100ms).</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="product loaded"&gt;Product 1&lt;/div&gt;
  &lt;div class="product loaded"&gt;Product 2&lt;/div&gt;
  &lt;div class="product loaded"&gt;Product 3&lt;/div&gt;
  &lt;div class="product loaded"&gt;Product 4&lt;/div&gt;
  &lt;div class="product loaded"&gt;Product 5&lt;/div&gt;
  &lt;div class="product loaded"&gt;Product 6&lt;/div&gt;
  &lt;div class="product loaded"&gt;Product 7&lt;/div&gt;
  &lt;div class="product loaded"&gt;Product 8&lt;/div&gt;
  
  &lt;!-- Appended upon running of infinite-scroll.js --&gt;
  &lt;div class="product appended"&gt;Product 9&lt;/div&gt;
  &lt;div class="product appended"&gt;Product 10&lt;/div&gt;
  &lt;div class="product appended"&gt;Product 11&lt;/div&gt;
  &lt;div class="product appended"&gt;Product 12&lt;/div&gt;
  &lt;div class="product appended"&gt;Product 13&lt;/div&gt;
  &lt;div class="product appended"&gt;Product 14&lt;/div&gt;
  &lt;div class="product appended"&gt;Product 15&lt;/div&gt;
  &lt;div class="product appended"&gt;Product 16&lt;/div&gt;
  </code></pre>
  
  <p><strong>SCSS</strong></p>
  
  <pre><code>.product {
      // Step fade
      @for $i from 1 to 50 {
          &amp;:nth-child(#{$i}) { transition-delay: $i * 100ms; }
      }
  }
  </code></pre>
  
  <p><strong>JQUERY (Adds class to appended items)</strong></p>
  
  <pre><code>// Add class to appended items to enable step fade
  $grid.on( 'append.infiniteScroll', function(event, response, path, items) {
       $(items).delay(10).queue(function() {
          $(this).addClass('appended');
       });
  });
  </code></pre>