Contenteditable Height transition

Question

I have a contenteditable div which grows as the user types.

I now need to transition the height so that when the user presses Enter, the div would grow slowly.

Here's the animation I'm looking for (but when the user creates a new line rather than on focus):

And here's my (probably naive) attempt:

CSS:

div[contenteditable]{
    border: 1px solid black;
    max-height: 200px;
    overflow: auto;
    transition : all 300ms ease;
}

HTML:

<div contenteditable>
    Testing <br/> one two three
</div>

jsfiddle

Can I achieve this using only HTML/CSS or do I have to resort to JS?

The value of height is `auto` and it never changes in your example. Ergo there's no transition. Transitions from and to `auto` also wouldn't work. — a better oliver, Sep 29 '15 at 09:08
Hmm, I've also tried but there doesn't seem to be any max-height trickery I can use to work my way out of this one. — David, Sep 29 '15 at 09:14

orlland · Accepted Answer · 2015-09-29T09:25:10.547

4

@keyframes lineInserted {
  from {
    height: 0;
  }
  to {
    height: 20px; /* cons: hardcoded height */
  }
}
div[contenteditable] > div {
  animation-duration: 300ms;
  animation-name: lineInserted;
  transition: height 300ms;
}
div[contenteditable] {
  border: 1px solid black;
  max-height: 200px;
  overflow: auto;
  transition: all 300ms ease;
}

<div contenteditable>
  Testing
  <br/>one two three
</div>

edited Sep 29 '15 at 09:25

answered Sep 29 '15 at 09:15

orlland

1,256
8
12

Thanks! The animation seems to "bounce back" though http://gph.is/1h6i480 Also, any way I can make it transition when lines are removed? – David Sep 29 '15 at 09:23
Fixed "bounce back" problem with `line-height : 20px;` – David Sep 29 '15 at 09:25
I'm not sure if you could still detect DOM removal through CSS. You might already need to use JS DOMNodeRemoved event there. – orlland Sep 29 '15 at 09:35

score 1 · Answer 2 · answered Sep 29 '15 at 09:35

Final solution based on Orland's answer. Thank you, bootstrap!

HTML

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div contenteditable class="form-control">
    Testing <br/> one two three
</div>

CSS:

@keyframes lineInserted {  
    from { height: 0; }
    to { height: 20px; }  /* cons: hardcoded height */
}

div[contenteditable] > div {
    animation-duration: 200ms;
    animation-name: lineInserted;
}

div[contenteditable]{
    height : auto !important;
    overflow: auto;
    line-height : 20px;
}

Contenteditable Height transition

2 Answers2

Linked