Contenteditable высота перехода: анимировать после добавления (Shift + Enter) и удаления строки текста

Пока работает на использованиеcontenteditable атрибут на<div> тегс функцией автоматического увеличения текстового поля, Так жевысота перехода этого, Все это работает хорошо, за исключением одного: удаление символов, а точнее, строки, не будет анимировать ее высоту, в отличие от добавления новых строк. У меня еще немного знаний по 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>

Когда я нажимаюсдвиг + Войти, он тоже не оживляет, хорошо работает при нажатииВойти, Просто удаление линий исдвиг + Войти Сочетание клавиш при вводе новой строки является проблемой.

Как заставить это работать? Можно ли это сделать с использованием чистого CSS? Или добавив для этого функцию javascript?

 Roysh17 июл. 2016 г., 14:01
Готово. Я мог бы получить больше идей позже.
 Zange-chan17 июл. 2016 г., 13:59
@Roysh Буду признателен, если вы проголосуете за мой вопрос, это может помочь другим, кто сталкивается с этой ситуацией. :)
 Zange-chan18 июл. 2016 г., 08:52
@Roysh Можете ли вы опубликовать свой ответ для функции shift + enter?
 Zange-chan17 июл. 2016 г., 08:32
@Roysh Это то же самое по ссылкам, которые я разместил.
 Roysh17 июл. 2016 г., 07:44
Можете ли вы опубликовать свой код и объяснить, чего именно вы хотите достичь?
 Zange-chan17 июл. 2016 г., 09:46
Клавиша Shift + работает. Но при удалении строк есть некоторые пустые строки, которые не удаляются (возможно, из-за функции добавления). Удаление строк тоже не оживляет. Ну, идея для клавиши Shift + работает с некоторыми необходимыми "исправить". :)
 Roysh17 июл. 2016 г., 09:42
Это самое близкое, что я могу получить сейчасjsfiddle.net/wx38rz5L/581
 Roysh17 июл. 2016 г., 09:00
проходя через это сейчас. Надеюсь, я смогу помочь
 Roysh17 июл. 2016 г., 10:20
Я получил это работает без удаления события ... теперь я пытаюсь выяснить это
 Zange-chan17 июл. 2016 г., 09:01
Любая помощь будет действовать до тех пор, пока она работает, или пока она дает советы или идеи о том, как заставить ее работать. :)
 Roysh17 июл. 2016 г., 09:47
Я знаю. Я посмотрю, смогу ли я что-нибудь с этим сделать
 Zange-chan17 июл. 2016 г., 09:47
Я ценю твои усилия, приятель. :)
 Roysh18 июл. 2016 г., 09:43
только что сделал. Смотри ниже

Ответы на вопрос(2)

Во-первых, измените свой 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;
}

Затем добавьте этот jQuery, который обнаруживаетсдвиг + Войти события и добавляет div, когда они происходят

$(".autogrow").keydown(function(e){

    if (e.keyCode == 13 && e.shiftKey || e.keyCode == 13)
    {
       $(this).animate({height: $(this).height()+20},200);
                $(this).append('<div><br></div>');
    }
});

И это должно работать.

Проверьте скрипкуhttps://jsfiddle.net/wx38rz5L/582/

 Roysh18 июл. 2016 г., 11:43
Я на самом деле думал о том, что ты сделал. Дайте мне несколько часов, и я постараюсь это исправить
 Zange-chan18 июл. 2016 г., 11:37
Я изменяю ваш код, чтобы проверить функцию удаления с помощью счетчиков строк путем подсчета<br>s. Я использую клавиши Shift + Enter для ввода новой строки. Может быть, вы можете внести некоторые изменения в код, чтобы он работал. Это работает, но нуждается в некотором кодировании.jsfiddle.net/wx38rz5L/609
Решение Вопроса

я лично использую решение, не основанное на чистых CSS-анимациях / переходах, которые, как я обнаружил, всегда имеют проблемы. Например, в вашей реализации CSS есть эффект возврата, если вы используетеВойти слишком быстро (вы можете замедлить анимацию, чтобы увидеть ее лучше).

Более того, обработка новых строк в разных браузерах отличается, некоторые добавят<div><br></div>, некоторые версии IE добавляют только<br>, так далее.

Мне никогда не удавалось исправить все эти проблемы или я нашел реализацию, исправляющую все это, поэтому я решил вообще не изменять поведениеcontenteditableПусть браузер делает магию, которая работает и реагирует на происходящее.

Нам даже не нужно беспокоиться о ключевых событиях, таких каксдвиг + Войти или события, такие как удаление и т. д., все они изначально обрабатываются навигатором.

Вместо этого я выбираю использовать 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 */
}
<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>

 Zange-chan19 июл. 2016 г., 15:12
Работает хорошо. Ну, я все еще любитель, что я не думаю, что такой подход, но он работает хорошо. Буду признателен, если вы проголосуете за мой вопрос, это поможет другим, кто столкнулся с той же ситуацией, с которой я столкнулся. :)

Ваш ответ на вопрос