我正在尝试循环一些单词并以“文本类型”的方式为它们设置动画。这对于第一个单词效果很好,但是一旦我更新动画段落的内容,动画就不会出现。基本上,更新内容后如何触发 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>
最佳答案
你可以使用这个逻辑
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>
关于javascript - 使用 Jquery 更改内容后 CSS 动画再次运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33104979/