title: Possible to use CSS transitions with textarea rows value?
body: <p>In all the years I've been developing websites this situation has never cropped up before and I'm not sure that what I'm attempting to do is even possible.</p>
  
  <p>I have a <code>React</code> component with a <code>textarea</code>. It's initial state is rendered with a height of 1 row like this :</p>
  
  <pre><code>state = {
    rows: 1
  }
  
  ...
  
  &lt;textarea 
     ...
     rows={this.state.rows ? this.state.rows : 1}
     onFocus={this.onFocus}
     ...
  /&gt;
  </code></pre>
  
  <p>The <code>onFocus</code> function changes the rows state to 5, thereby expanding the <code>textarea</code>.</p>
  
  <p>This works perfectly, but I'm now trying to add CSS transitions to the <code>textarea</code> so it expands nicely instead of just instantly expanding.</p>
  
  <p>Everything I've tried doesn't work, for example :</p>
  
  <pre><code>textarea#content {
    transition: all 2s ease-in-out;
  }
  </code></pre>
  
  <p>...so my question is - is it not possible to use CSS transitions in this way? I did some googling and couldn't find any answers which leads me to believe that it isn't, but I just want to make sure before I set about achieving this another way.</p>