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实际上并不是在考虑此用例的情况下构建的。它旨在帮助制作句子列表的动画，例如您在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)

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

1 个答案: