可编辑高度转换 [英] Contenteditable Height transition

问题描述

我有一个contenteditable div，

这是我的（可能是天真的）尝试：

/ p>

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

HTML：

 < div contenteditable> 
测试< br />一两三
< / div> 
  

jsfiddle

我可以仅使用HTML / CSS才能实现这个功能，还是必须使用JS？

解决方案

< pre class =snippet-code-css lang-css prettyprint-override> @keyframes lineInserted {from {height：0; }到{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&测试< br />一两三< / div>  

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?

解决方案

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

这篇关于可编辑高度转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！