可转换的高度转换:添加(shift + enter)和删除一行文本后的动画
到目前为止,它使用
标记上的
contenteditable
属性和文本框的自动增长function 。 也是它的高度过渡 。 这一切都很好,除了一件事,删除字符,特定的,一条线,不会动画它的高度,不像添加新的行。 我对CSS还有一些了解。
.autogrow { border: 1px solid rgb( 0, 0, 0 ); padding: 10px; } @keyframes line_insert { from { height: 0px; } to { height: 20px; } } .autogrow[contenteditable] > div { animation-duration: 250ms; animation-name: line_insert; } .autogrow[contenteditable] { overflow: hidden; line-height: 20px; }
当我按Shift + Enter时 ,它也没有动画,虽然按Enter键表现不错。 只需在输入新行时删除行和Shift + Enter键组合就是问题所在。
如何使其工作? 可以使用纯CSS完成吗? 或者为它添加一个javascript函数?
为了避免这些问题,我个人使用的解决方案不是基于纯CSS动画/转换,我发现它总是有问题。 例如,在CSS实现中,如果使用“ 输入太快”,则会有一个反弹效果(您可以减慢动画速度以便更好地查看动画)。
此外,新的行处理在浏览器之间是不同的,有些将添加
,某些版本的IE仅添加
等。
我从来没有能够解决所有这些问题,或者找到了解决所有这些问题的实现,所以我决定不修改所有可能的行为,让浏览器做的是魔术,它起作用,反而对正在发生的事情作出反应。
我们甚至不必担心Shift + Enter等键事件或删除等事件,所有这些都由导航器本地处理。
我选择使用2个元素:一个用于实际的contenteditable
,一个用于我的contenteditable
的样式,它将是具有基于contenteditable
的实际高度的高度动画/过渡的元素。
要做到这一点,我正在监视每一个可以改变一个contenteditable
的高度的事件,如果我的造型元素的高度不一样,我就是为造型元素设置动画。
var kAnimationSpeed = 125; var kPadding = 10; $('div[contenteditable]').on('blur keyup paste input', function() { var styleElement = $(this).prev(); var editorHeight = $(this).height(); var styleElementHeight = styleElement.height(); if (editorHeight !== styleElementHeight - kPadding * 2) { styleElement.stop().animate({ height: editorHeight + kPadding * 2 }, kAnimationSpeed); } });
.autogrowWrapper { position: relative; } .autogrow { border: 1px solid rgb(0, 0, 0); height: 40px; /* line-height + 2 * padding */ } div[contenteditable] { outline: none; line-height : 20px; position: absolute; top: 10px; /* padding */ left: 10px; /* padding */ right: 10px; /* padding */ }
这有点像hacky,但它确实有效。
首先,修改你的CSS
.autogrow { border: 1px solid rgb( 0, 0, 0 ); padding: 10px; } @keyframes line_insert { from { height: 0px; } to { height: 20px; } } .autogrow[contenteditable] > div { animation-duration: 250ms; animation-name: line_insert; } .autogrow[contenteditable] { overflow: hidden; line-height: 20px; }
然后添加这个检测Shift + Enter事件的jQuery,并在它们出现时追加div
$(".autogrow").keydown(function(e){ if (e.keyCode == 13 && e.shiftKey || e.keyCode == 13) { $(this).animate({height: $(this).height()+20},200); $(this).append('
'); } });
那应该有用。
检查小提琴https://jsfiddle.net/wx38rz5L/582/