Почему только Chrome (и, возможно, Safari) хорошо работает с переходом (высота, ширина)? - PullRequest
Новая
       17

Почему только Chrome (и, возможно, Safari) хорошо работает с переходом (высота, ширина)?

0 голосов
/ 19 марта 2012

У меня есть текстовое поле, которое плавно растягивается (увеличивает высоту): 

<style type="text/css">
textarea {
  height:20px;
  width:170px;
  transition-property: all 0.2s linear; /* PS: I don't want to write all prefixes in this question */
}
  textarea:focus {
  height:30px;
}
</style>
<div style="overflow:hidden;"><!--And some good styles-->
  <textarea style="resize:none;padding:10px;"></textarea>
</div>

Итак, в хроме <div> растягивается плавно (и <textarea> тоже, что я хочу), но в опереи firefox <textarea> растягивается плавно, но <div> нет.

Я пытался добавить переход к <div>, но безрезультатно.

Есть ли решение этого?(PS: у меня есть некоторые идеи, чтобы решить это с помощью javascript: просто добавьте класс в <div> onfocus, но могу ли я решить это без js?)

1 Ответ

0 голосов
/ 23 мая 2012

Итак, я сделал это: я просто добавляю класс "active" к <div> на фокусе textarea и на размытие: удаляем класс "active" из <div>.Все преобразования, выполняемые этим классом, например 

div {
  height: 20px;
  transition: all 0.2s linear;
}
div textarea {
  height: 10px;
  transition: all 0.2s linear;
}
div.active textarea {
  height:30px;
}
div.active {
  height:40px
}

Работает очень хорошо.

...