更改 textarea 上的文本时动画停止

Question

我有一个将内容复制到另一个 div 的文本区域。不过，那个 div 有带动画的文本。当我开始在 textarea 上书写并开始复制到 div 时，动画停止。如何为每个字符输入应用动画？动画通过类名应用到 div。 HTML：

var $tlt = $('.tlt').textillate({ 
    in: {
        effect: 'fadeIn',
        shuffle: true
    },
    out: {
        effect: 'fadeOut',
        shuffle: true
    },
    loop: true,
    minDisplayTime: 1000,
});



$('.content:not(.focus)').keyup(function() {
    var value = $(this).val();
    var contentAttr = $(this).attr('name');
    $('.' + contentAttr + '').html(value.replace(/\r?\n/g, '<br/>'));
  
})


$(".manifestoWriter").on('change', '#toChange', function(){
   $tlt.textillate('start');
});

<textarea id="manifestoWriter" class="chatinput form-control content" placeholder="We want courage, audacity and hope without the fascism" rows="11" style="resize: none; background-color:#f7f7f7; border: 0cm; border-radius: 0cm; " maxlength="800" name="mas"></textarea>

<h1 class="tlt mas" id="toChange">
 We want courage, audacity and hope without the fascism
</h1>

JSFIDDLE

Answer 1

我认为您应该更改 textillate.js 代码。首先转到 jquery.textillate.js 中的第 247 行（或者可能是 249）（您必须下载文件）。你会发现

  if (!data) {
    $this.data('textillate', (data = new Textillate(this, options)));
  } else if (typeof settings == 'string') {
    data[settings].apply(data, [].concat(args));
  } else {
    data.setOptions.call(data, options);
  }

改成

$this.data('textillate', (data = new Textillate(this, options)));

和

    $(".manifestoWriter").on('change', '#toChange', function(){
      $tlt.textillate('start');
   });

到

$("#manifestoWriter").on('change', function(){
       $('.tlt').textillate({ 
        in: {
        effect: 'fadeIn',
        shuffle: true
      },
      out: {
        effect: 'fadeOut',
        shuffle: true
      },
      loop: true,
      minDisplayTime: 1000,
    });
});

在这里查看jsfiddle

PS：不是最好的做法。如果您使用“停止”或将任何字符串传递给textillate，它将导致包

Answer 2

Textillate 并没有真正考虑到这个用例。它旨在帮助为句子列表设置动画，就像您在 https://textillate.js.org 上看到的那样。

我认为你最好直接使用 animate.css 和一些 javascript 将字符从文本区域复制到另一个容器。

下面是一个帮助您入门的示例：https://jsfiddle.net/jschr/jdqpxyvm/31。

const textarea = document.querySelector('textarea')
const container = document.querySelector('.container')

const createSpan = (char) => {
  const span = document.createElement('span')
  span.classList.add('fadeIn')
  span.classList.add('animated')
  span.innerText = char
  return span
}

const updateChars = () => {
  const updatedChars = []
  const currentSpans = Array.from(container.querySelectorAll('span'))
  const chars = textarea.value.split('')
  // Iterate over each character in the textarea and append 
  // new chars to the container.
  chars.forEach((char, index) => {
    const spanAtIndex = currentSpans[index]
    // Add new span if one doesn't exist at current index
    if (!spanAtIndex) {
      container.appendChild(createSpan(char))
    }
    // TODO: Handle deletions
  })
}

textarea.addEventListener('keypress', () => {
  setTimeout(updateChars)
}, false)