Можно ли использовать CSS-переходы со значением строк textarea?

Question

За все годы, что я разрабатывал веб-сайты, эта ситуация никогда не возникала раньше, и я не уверен, что то, что я пытаюсь сделать, даже возможно.

У меня есть Reactкомпонент с textarea.Его начальное состояние отображается с высотой 1 строки следующим образом:

state = {
  rows: 1
}

...

<textarea 
   ...
   rows={this.state.rows ? this.state.rows : 1}
   onFocus={this.onFocus}
   ...
/>

Функция onFocus изменяет состояние строк на 5, расширяя таким образом textarea.

Это работаетотлично, но сейчас я пытаюсь добавить CSS-переходы в textarea, чтобы он расширялся красиво, а не просто мгновенно.

Все, что я пробовал, не работает, например:

textarea#content {
  transition: all 2s ease-in-out;
}

... поэтому мой вопрос - нельзя ли использовать CSS-переходы таким образом?Я немного погуглил и не смог найти ответов, которые бы заставили меня поверить, что это не так, но я просто хочу убедиться, прежде чем приступить к достижению этого другим путем.

Answer 1

Не могу сказать, как здесь может быть задействован React, но для работы transition для свойства CSS, для которого выполняется переход, должно быть установлено значение по умолчанию.Вы косвенно влияете на свойство height, изменяя rows, но на самом деле вы не указываете, что хотите изменить height, поэтому вы не можете перейти на height, если вытолько косвенно меняют его.Кроме того, здесь нет свойства CSS rows, поэтому не стоит его переносить.

Решение состоит в том, чтобы не устанавливать height косвенно с rows в первую очередь.Установите height напрямую и установите значение по умолчанию для height в CSS.

И вам даже не нужен JavaScript для этого:

textarea {
 height:1em; /* Initial value required for transitions to work */
 transition:height 1s ease-in-out; /* configure the transition*/
}

/* Style to be applied automatically when the textarea recievs the focus */
textarea:focus {
  height:5em; /* A change in this property will trigger the transition */
}

<textarea></textarea>