可编辑高度转换

本文介绍了可编辑高度转换的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我有一个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？解决方案 @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>jsfiddleCan 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> 这篇关于可编辑高度转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！