запустить анимацию CSS с Javascript на конкретное действие

Question

запустить анимацию CSS с Javascript на конкретное действие

1

Я пытаюсь добавить класс для эффекта анимации автозагрузки для элемента textarea.

var tx = document.getElementsByTagName('textarea');
for (var i = 0; i < tx.length; i++) {
  tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput(e) {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';


}

как я могу переключать анимацию только при срабатывании высоты? что-то по этой линии:

this.classList.toggle("horizTranslate")

но как определить, когда изменяется высота?

user2513846 20 окт. 2017, в 03:55

Источник

0

Что вы подразумеваете под высотой срабатывания? Вы имеете в виду, когда текст области текста превышает высоту блока?
Vincent1989 20 окт. 2017, в 01:51
0

поэтому в этой демонстрации текстовая область увеличивается при добавлении нового текста. Я пытаюсь добавить анимацию / класс к тому моменту, чтобы текстовое поле не прыгало, а плавно изменяло высоту. Имеет ли это смысл?.
user2513846 20 окт. 2017, в 01:53

Теги:

javascript

css3

css-animations

1 ответ

Ещё вопросы

Что вы подразумеваете под высотой срабатывания? Вы имеете в виду, когда текст области текста превышает высоту блока?
поэтому в этой демонстрации текстовая область увеличивается при добавлении нового текста. Я пытаюсь добавить анимацию / класс к тому моменту, чтобы текстовое поле не прыгало, а плавно изменяло высоту. Имеет ли это смысл?.

Johuder Gonzalez · Answer 1 · 2017-10-20T02-10-00.000Z

возможно, вам не нужно, JS для этого, с чистым css вы можете это сделать, единственное, с чем вам нужно заботиться о transition и атрибутах max-height css.

Я просто изменил ваш код в примере, надеюсь, что смогу вам помочь.

См. Код ниже.

var tx = document.getElementsByTagName('textarea');
/*for (var i = 0; i < tx.length; i++) {
  tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
  tx[i].addEventListener("input", OnInput, false);
}*/

function OnInput(e) {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
 
  
}

textarea {
  max-height: 40px;
  height: 500px;
  transition: max-height 0.5s;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  padding: .5em;
  font-size: 1em;
}

textarea:focus {
  background: orange;
  height: 200px;
  max-height: 200px;
}

body {
  font-family: sans-serif;
  font-size: 16px;
}

<textarea class="horizTranslate" placeholder="Type, paste, cut text here..."></textarea>

Привет, да, я знал, как добавить такой переход. Проблема в том, что я не могу добавить ту же анимацию, когда фактическая высота изменяется в момент добавления большего количества символов. ты знаешь, что я имею в виду? вот почему я думал о функции переключения JS.