可写性高度转换：在添加（shift + enter）并删除一行文本后生成动画 [英] Contenteditable height transition: animate after adding (shift+enter) and removing a line of text

问题描述

到目前为止，使用< div> 标签

此外，新行处理在浏览器之间是不同的，有些会添加 < div>< br>< / div> ，某些版本的IE只添加< br> >

我从来没有能够解决所有这些问题或找到一个实现修复所有这些，所以我决定不修改所有的行为 contenteditable

我们甚至不必担心键盘事件例如 Shift + 输入或类似删除等事件，所有这些都由导航器本地处理。

我选择使用2个元素：一个用于实际的 contenteditable ，另一个用于我的 contenteditable 基于 contenteditable 的实际高度的高度动画/过渡。

为了做到这一点，我'm监控可以改变 contenteditable 高度的每个事件，如果我的样式元素的高度不一样，我动画

。

。 =truedata-babel =false>

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

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

It works so far on using the contenteditable attribute on the <div> tag with the autogrow feature of a textbox. Also the height transition of it. It all works good, except for one thing, deleting characters, to be specific, a line, will not animate its height, unlike adding new lines. I have still a little knowledge on 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;
}

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

When I press Shift + Enter, it doesn't animate either, it does well though while pressing Enter. Just the removing of lines and the Shift + Enter key combination while entering a new line is the problem.

How to make it work? Can it be done using pure CSS? Or adding a javascript function for it?

解决方案

To avoid these issues, I personally use a solution not based on pure CSS animations / transitions which I found always have problems. For example, in your CSS implementation, there is a bounce back effect if using the Enter too fast (you can slow the animation down to see it better).

Moreover, new lines handling is different between browsers, some will add <div><br></div>, some versions of IE add only <br>, etc.

I've never been able to fix all these problems or found an implementation fixing all of these so I decided to not modify at all the behavior of the contenteditable, let the browser do is magic which works and instead, react to what's happening.

We don't even have to worry about keys events like Shift + Enter or events like deletion, etc., all of these are natively handled by the navigator.

I choose instead to use 2 elements: one for the actual contenteditable and one for the styling of my contenteditable which will be the one having height animations / transitions based on the actual height of the contenteditable.

To do that, I'm monitoring every events that can change the height of a contenteditable and if the height of my styling element is not the same, I'm animating the styling element.

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

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

这篇关于可写性高度转换：在添加（shift + enter）并删除一行文本后生成动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！