javascript - 如何使用jquery更新动画效果？

Question

我正在尝试使用 animation.css 库中的 slideInleft 动画类来更新正在设置动画的 div 内容，2 秒后我正在尝试通过 slideLeftout 来更新效果类。

var i = 0;
setInterval(function showText{
var txt= data; // my data is an array with 5 values
$("#text").empty().append(txt[i].value).addClass('slideInLeft');
},2000);
$("#text").empty().append(txt[i].value).addClass('slideOutLeft');

Answer 1

这是怎么回事？

setTimeout(function () {
  $('#text').text('hello').addClass('slideInLeft');

  setTimeout(function () {
      $('#text').text('goodbye').removeClass('slideInLeft').addClass('slideOutRight');
  }, 2000);
  
}, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<div id="text" class="animated"></div>