javascript - 使用 Jquery 更改内容后 CSS 动画再次运行

Question

我正在尝试循环一些单词并以“文本类型”的方式为它们设置动画。这对于第一个单词效果很好，但是一旦我更新动画段落的内容，动画就不会出现。基本上，更新内容后如何触发 CSS 动画再次运行？

var text = ["string1", "string2", "string3"];
$('.css-typing').text(text[0]);
var i = 1;

myInt = setInterval(function() {
      $('.css-typing').text(text[i]);
      i++;
  },5000);

.css-typing {
   width: 30em;
   color: #a7a37e;
   font-size: 3em;
   white-space: nowrap;
   overflow: hidden;
   -webkit-animation: type 5s steps(50, end);
   animation: type 5s steps(50, end);
   display: block;
   margin-left: 0;
 }
 @keyframes type {
   from {
     width: 0;
   }
 }
 @-webkit-keyframes type {
   from {
     width: 0;
   }
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="css-typing">start</p>

Answer 1

你可以使用这个逻辑

     var el     = $('#test'), 
     newone = el.clone(true);                        //clone the existing 
     el.before(newone);                              //add it before the current 
     $("." + el.attr("class") + ":last").remove();   //remove the existing

演示:

var text =["string1", "string2", "string3"];
$('.css-typing').text(text[0]);
var i = 1;
myInt = setInterval(function(){

$('#test').text(text[i]);
 
  var el     = $('#test'),
 newone = el.clone(true);
 el.before(newone);
 $("." + el.attr("class") + ":last").remove();
 
  i++;
},6000);

.css-typing
{
    width: 30em;
    color: #a7a37e;
    font-size: 3em;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 5s steps(50, end);
    animation: type 5s steps(50, end);
    display:block;
    margin-left:auto;
    margin-right:auto;
}


@keyframes type{
    from { width: 0; }


@-webkit-keyframes type{
    from { width: 0; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="test" class="css-typing"></p>

JSFiddle:http://jsfiddle.net/kishoresahas/qdjro8pw/