Question

我想为textarea的每一行设置动画，而不会有任何中断。这样的事情（https://greensock.com/SplitText）。这有可能与jQuery（所以没有Greensock）。

祝福

Answer 1

是。它可能。

您可以使用https://macarthur.me/typeit/docs/ typeIt库。

如果您在每行后需要一些Css动画，可以在这里查看我的答案 https://stackoverflow.com/a/43222060/1907391

从回调函数中删除.empty()。

这是一个片段。

＆＃13;

$(document).ready(function() {
  var ara = ['Text 1', 'Text 2', 'Text 3', 'Text 4', 'TypeIt is the most versatile jQuery animated typing plugin on the planet. In simple use, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles HTML tags & entities.', 'For more advanced, controlled typing effects, TypeIt comes with companion functions that can be chained to control your typing down to the smallest character, enabling you to type an dynamic narrative, with complete control over speed, characters, line breaks, deletions, pausing, everything.'];
  doType();

  function doType() {
    //var x = ara.pop();
    $('.type-it').typeIt({
      strings: ara,
      speed: 110,
      breakLines: true,
      callback: function() {
        $('.type-it').delay(2000).queue(function() {})
      }
    });
  }
});

＆＃13;

.type-it {
  transition: all 0.5s ease-in-out;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js"></script>
<div class="type-it"></div>

＆＃13;

您可以在此处找到其他一些动画插件http://www.learningjquery.com/2016/06/12-jquery-plugins-to-animate-text

Answer 2

您可以通过为每个单词创建子元素来为单个单词设置动画：

$("#text").html(function () {
  return "<div>" + $(this).html().split(" ").join("</div><div>") + " </div>";
});

setTimeout(function (){
  $("#text div:nth-child(even)")
    .addClass("even",1000);
  $("#text div:nth-child(odd)")
      .addClass("odd",1000);
},2000);

#text {
  height:3em;
  overflow:hidden;
}

#text div {
  float:left;
  margin-left:5px;
}

.even {
  margin-top:-2em;
}

.odd {
  margin-top:4em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="text">
  This is a great text area.
</div>

动画每行textarea

2 个答案: