可转换的高度转换：添加（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函数？

Answer 1

为了避免这些问题，我个人使用的解决方案不是基于纯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 */ } 

Answer 2

这有点像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/