使用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 

DEMO：

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/

Answer 2

这是你想要的吗？现在数组中的所有文本元素都具有打字效果。好主意。

$(function(){ 
 
var text = ["string1", "string2", "string3"]; 
 
var i = 0; 
 

 
if(i == 0) { 
 
\t $('.css-typing').text(text[0]).addClass("typeClass"); 
 
\t ++i; 
 
}else{ 
 

 
} 
 
\t 
 
myInt = setInterval(function() { 
 
\t 
 
\t if(!$('.css-typing').hasClass("typeClass") && i >= 1 && i < text.length) { 
 

 
\t \t $('.css-typing').text(text[i]).toggleClass("typeClass") 
 
\t \t ++i; 
 
\t } 
 
\t else{ 
 
\t \t $('.css-typing').removeClass("typeClass") 
 

 
\t } 
 
},2000); 
 
\t })

.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; 
 
} 
 
.typeClass{ 
 
    \t animation: type 5s steps(50, end);; 
 
} 
 
@keyframes type { 
 
    from { 
 
    width: 0; 
 
    } 
 
} 
 
@-webkit-keyframes type { 
 
    from { 
 
    width: 0; 
 
    } 
 
}

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

与动画填充模式新的CSS：前锋

.css-typing { 
    width: 0; 
    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; 
} 
.typeClass{ 
    -o-animation: type 5s steps(50, end) forwards; 
    -webkit-animation: type 5s steps(50, end) forwards; 
    animation: type 5s steps(50, end) forwards; 
} 
@keyframes type { 
    from { 
    width: 0; 
    } 
    to{ 
    width:30em; 
    } 
} 
@-webkit-keyframes type { 
    from { 
    width: 0; 
    } 
    to{ 
    width:30em; 
    } 
}