title: Flash new item added to array in dom with knockout.js
body: <p>I have a play by play array that updates using knockout and a new item.  Is there anyway to make a color change of the font to red and back to white when its added for a visual effect.  I can do this on a single property easily with the binding below, but how do I accompish this on a new object being added to the dom.</p>
  
  <pre><code>ko.bindingHandlers.flash = {
  
      init: function (element, valueAccessor) {},
  
      update: function (element, valueAccessor) {
  
          var updated = valueAccessor().updated;
  
          if (updated()) {
              $(element).addClass('flash');
              setTimeout(function () {
                  $(element).removeClass('flash');
              }, 1000);
  
              updated(false);
          }
      }
  };
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.flash {
      color: red;
      -webkit-transition: color 0.4s ease;
      -moz-transition: color 0.4s ease;
      -o-transition: color 0.4s ease;
      transition: color 0.4s ease;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="accordion-inner period-play-by-play" data-bind="foreach: plays"&gt;
                          &lt;div class="play" data-bind="css: {'home-team': $data.IsHomeTeam, 'away-team': !$data.IsHomeTeam, 'modified': $data.isNew}"&gt;
                              &lt;b data-bind="text: $data.Time + ' '"&gt;&lt;/b&gt;
                              &lt;span data-bind="text: $data.Team + ' ' + $root.actionName($data.Action)"&gt;&lt;/span&gt; 
                              &lt;span data-bind="text: $root.actionTypeName($data.ActionType)"&gt;&lt;/span&gt;
                              &lt;span&gt;by &lt;i data-bind="text: $data.Name"&gt;&lt;/i&gt;&lt;/span&gt;
                              &lt;!-- ko if: $data.Lead != '' --&gt;
                              &lt;div class="pull-right" data-bind="text: $data.Lead"&gt;&lt;/div&gt;
                              &lt;!-- /ko --&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>