可编辑高度转换 [英] 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>
我可以仅使用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>
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屋!
查看全文