Contenteditable height transition: animate after adding (shift+enter) and removing a line of text

Question

It works so far on using the contenteditable attribute on the

tag with the autogrow feature of a textbox. Also the height transition of it.

Answer 1

It's kinda hacky, but it works.

First, modify your CSS

.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;
}

Then add this jQuery that detects Shift + Enter events and appends a div whenever they occur

$(".autogrow").keydown(function(e){

    if (e.keyCode == 13 && e.shiftKey || e.keyCode == 13)
    {
       $(this).animate({height: $(this).height()+20},200);
                $(this).append('

');
    }
});

And that should work.

Check fiddle https://jsfiddle.net/wx38rz5L/582/