javascript - Contenteditable 高度动画 : animate only after a line is deleted

Question

这是我之前 question 的延续.

我设法通过添加一个条件 e.which === 13 来修复“动画暂停每次连续击键”，当 Enter 键是按下。

---

这是前一个的工作原理:

如您所见，在输入换行符和连续击键后，动画会滞后，这意味着动画会在每次击键时执行。

---

这些是修改后的，只有在 Enter 被按下后才会有动画:

它运行流畅(虽然在录制过程中有点滞后)。

---

以下是删除每个字符(不是长按)时的工作原理:

如您所见，它的动画效果不佳，因为当您连续删除每个字符时，动画会暂停，就像第一次尝试一样。

---

所以我现在要实现的是相反的，删除换行后动画流畅。

这是一个实时代码:

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);
  }
});

.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>

如何在删除换行时实现流畅的动画，或者如何仅在删除换行时制作动画？

Answer 1

我不知道这是否适用于跨浏览器，但 Chrome 添加了 <div> s 表示行，因此您实际上可以计算它们:

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);
});

所以你只需要调整你的动画:)