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