title: How to set CSS transition to a new element or do the same with JavaScript
body: <p>I saw one CSS3 menu which has very nice transition:</p>
  
  <pre><code>transition: all 0.3s ease 0.1s;
  </code></pre>
  
  <p>I want to apply the same transition to my table. I've got a table which on table row click, new row is appended after clicked row and it's displayed or hidden. </p>
  
  <p>Like in the code below(clickedTableRow has value of jQuery selector for clicked row):</p>
  
  <pre><code>clickedTableRow.after('&lt;tr style="display:none;"&gt;&lt;td&gt;some content&lt;/td&gt;&lt;/tr&gt;');
  clickedTableRow.next().slideDown(3000);
  </code></pre>
  
  <p>Instead of <code>slideDown</code> how can I apply the above css transition to newly added table row or is there javascript equivalent?</p>
  
  <p><strong>Question update:</strong></p>
  
  <p>Maybe I should <strong>rephrase</strong>. 
  What is the best way to slide down slowly some newly created content?</p>
  
  <p>It seems like:</p>
  
  <pre><code>clickedTableRow.after('&lt;tr&gt;&lt;td&gt;some content&lt;/td&gt;&lt;/tr&gt;').slideDown(3000); 
  </code></pre>
  
  <p>Looks the same as: </p>
  
  <pre><code>clickedTableRow.after('&lt;tr&gt;&lt;td&gt;some content&lt;/td&gt;&lt;/tr&gt;');
  </code></pre>
  
  <p>Without slideDown effect, what am I missing here?</p>