Contenteditable 高度过渡答案

【问题标题】：Contenteditable Height transitionContenteditable 高度过渡
【发布时间】：2015-12-26 16:33:32
【问题描述】：

我有一个 grows as the user types 的 contenteditable div。

我现在需要转换高度，以便当用户按下 Enter 时，div 会慢慢增长。

这是我正在寻找的动画（但是当用户创建新行而不是焦点时）：

这是我（可能是幼稚的）尝试：

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

我可以仅使用 HTML/CSS 来实现这一点，还是必须求助于 JS？

【问题讨论】：

高度的值为auto，在您的示例中它永远不会改变。因此，没有过渡。从auto 到auto 的转换也不起作用。
好的。那么如何让它发挥作用呢？
不是没有 JavaScript。
嗯，我也试过了，但似乎没有任何最大高度的技巧可以用来解决这个问题。

标签： javascript jquery html css

【解决方案1】：

@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>

【讨论】：

谢谢！虽然gph.is/1h6i480 动画似乎“反弹”了，但是当线条被移除时，我可以通过什么方式使其过渡？
修复了line-height : 20px;的“反弹”问题
我不确定您是否仍然可以通过 CSS 检测到 DOM 删除。您可能已经需要在那里使用 JS DOMNodeRemoved 事件。

【解决方案2】：

基于 Orland 的回答的最终解决方案。谢谢你，引导！

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

【讨论】：