可信高度动画：仅在删除一行后进行动画处理

Question

这是我之前question的延续。

我设法修复了＆＃34;动画暂停每次连续击键＆＃34;通过添加条件e.which === 13，在按下 Enter 键时检测并设置动画。

这是前一个的工作原理：

正如您所看到的，在输入换行符然后继续击键时，动画滞后，这意味着动画会在每次击键时执行。

这些是修改过的，仅在按下 Enter 后才会生成动画：

它运作顺畅（虽然在录制过程中有些滞后）。

这是删除每个字符时的工作原理（不长按）：

正如你所看到的，它没有很好的动画，因为当你连续删除每个角色时，动画会暂停，就像第一次尝试一样。

所以我现在想要实现的是反向的，在删除换行符后平滑动画。

这是一个实时代码：

＆＃13;

＆＃13;

var kAnimationSpeed = 250;
var kPadding = 10;

$('div[contenteditable]').on('blur keyup paste input', function(e) {
  var styleElement = $(this).prev();

  var editorHeight = $(this).height();
  var styleElementHeight = styleElement.height();

  if (editorHeight !== styleElementHeight - kPadding * 2 && e.which === 13 || e.which === 8) {
    styleElement.stop().animate({ height: editorHeight + kPadding * 2 }, kAnimationSpeed);
  }
});

＆＃13;

.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 */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="autogrowWrapper">
  <div class="autogrow"></div>
  <div contenteditable="true"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

如何在删除换行符时实现平滑动画，或者只在删除换行符时如何制作动画？

Answer 1

我不知道这是否适用于crossbrowser，但Chrome会为行添加<div>，因此您可以实际计算它们：

working fiddle

var kAnimationSpeed = 250;
var kPadding = 10;
var keyCodeDelete = 8;
var keyCodeReturn = 13;

$('div[contenteditable]').on('blur keyup paste', function(e) {
  var el = $(this);
  var styleElement = el.prev();
  var editorHeight = el.height();
  var styleElementHeight = styleElement.height();

  var divCount = parseInt(el.data('divcount') || 0 );
  var newDivCount = el.children('div').not(':contains("br")').length;
  var newLineDeleted = (divCount - 1 == newDivCount && e.which == keyCodeDelete);

  var heightCheck = (editorHeight !== styleElementHeight - kPadding * 2);
  var keyCodeCheck = (e.which === keyCodeReturn || e.which === keyCodeDelete);


  if (heightCheck && keyCodeCheck) {
    if (newLineDeleted) {
      $('body').append('<p>nl removed!</p>');
    }
    styleElement.stop().animate({ height: editorHeight + kPadding * 2 }, kAnimationSpeed);
  }

  el.data('divcount', newDivCount);
});

所以你只需调整你的动画：）

Answer 2

所以我设法根据Alex的回答来解决问题。

在他的回答中，它仅在按 Enter 键时有效。但我的目标是使用 Shift + Enter 。按 Enter 将在<div> div中插入新的contenteditable，而 Shift + Enter 会插入新的<br> 1}}而不是<div>。所以我修改了将计算<br>的代码，将值存储到数据中，并比较当前行数是否小于新行数，还监听 Backspace 键。然后我将e.which === 8替换为newLineDeleted变量，以告知何时删除新行。并删除input函数，以便它返回确切的布尔值（因为它似乎不适用于其中的input函数。我也添加了剪切和粘贴侦听器。

var kAnimationSpeed = 250;
var kPadding = 10;

$('div[contenteditable]').on('blur keyup paste', function(e) {
  var styleElement = $(this).prev();
  var editorHeight = $(this).height();
  var styleElementHeight = styleElement.height();
  
  var lineCount = parseInt($(this).data('linecount') || 0);
  var newLineCount = $(this).children('br').length;
  $(this).data('linecount', newLineCount);
  var newLineDeleted = (lineCount - 1 === newLineCount && e.which === 8);
  
  var cutPasteListener = (e.ctrlKey && e.which === 86 || e.which === 88);

  if (editorHeight !== styleElementHeight - kPadding * 2 && e.which === 13 || newLineDeleted || cutPasteListener) {
    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 */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="autogrowWrapper">
  <div class="autogrow"></div>
  <div contenteditable="true"></div>
</div>

感谢。