Es funktioniert soweit mit demcontenteditable Attribut auf dem<div> Etikettmit der Autogrow-Funktion einer Textbox. Auch dieheight Übergang davon. Es funktioniert alles gut, bis auf eine Sache, das Löschen von Zeichen, um genau zu sein, eine Linie, wird ihre Höhe nicht animieren, im Gegensatz zum Hinzufügen neuer Linien. Ich habe noch ein wenig CSS-Kenntnisse.

.autogrow {
  border: 1px solid rgb( 0, 0, 0 );
  padding: 10px;
}
@keyframes line_insert {
  from {
    height: 0px;
  }
  to {
    height: 20px;
  }
}
.autogrow[contenteditable] > div {
  animation-duration: 250ms;
  animation-name: line_insert;
}
.autogrow[contenteditable] {
  overflow: hidden;
  line-height: 20px;
}

<div class="autogrow" contenteditable="true"></div>

Wenn ich drückeVerschiebun + Eingebe, es animiert auch nicht, tut es aber gut, während Sie @ drückEingebe. Nur das Entfernen von Linien und dasVerschiebun + Eingebe Tastenkombination beim Eingeben einer neuen Zeile ist das Problem.

Wie funktioniert es? Kann man das mit reinem CSS machen? Oder eine Javascript-Funktion hinzufügen?