title: Reliable way to trigger one-way CSS transition?
body: <p>I have designed a transition that changes instantly background color, then slowly recovers to original color:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body, html {margin: 0px;padding: 0px;}
  div {
      padding: 3px;
      margin: 1px 0 1px 0;
      border: 1px solid black;
      background-color: #3377FF;
      transition: background-color .9s ease-in;
  }
  
  div:hover {
      background-color: #33FF11;
      transition-duration: 0s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt; Hello&lt;/div&gt;
  &lt;div&gt; Hello&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is designed for row in a table to notify user of a change. I'd like to trigger effect this programmatically, but by using the actual CSS.</p>
  
  <pre><code>Row.prototype.blink = function() {
      ... ?
  } 
  </code></pre>
  
  <p>I tried to use <code>setTimeout</code> to add and remove class name from the nodes:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("div").on("click", function() {
      $(this).addClass("updated");
      var _this = this;
      setTimeout(function(){$(_this).removeClass("updated");}, 30);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body, html {margin: 0px;padding: 0px;}
  div {
      padding: 3px;
      margin: 1px 0 1px 0;
      border: 1px solid black;
      background-color: #3377FF;
      transition: background-color .9s ease-in;
  }
  
  div.updated {
      background-color: #33FF11;
      transition-duration: 0s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;p&gt;Click div to activate the blink effect:&lt;/p&gt;
  
  
  &lt;div&gt; Hello&lt;/div&gt;
  &lt;div&gt; Hello&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I also tried to use the <a href="https://developer.mozilla.org/en-US/docs/Web/Events/transitionend" rel="nofollow"><code>transitioned</code></a> event, but the event doesn't ever trigger:</p>
  
  <pre><code>$("div").on("click", function() {
      $(this).one("transitionend", function(){$(this).removeClass("updated");}); // never happens
      $(this).addClass("updated");
  });
  </code></pre>
  
  <p>I don't like the setTimeout method, can't you think of better trick to trigger the <em>blink</em> effect?</p>