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

<强>样本：

＆＃13;

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);

＆＃13;

.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; }
}

＆＃13;

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

＆＃13;

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

Answer 2

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

$(function(){
var text = ["string1", "string2", "string3"];
var i = 0;

if(i == 0) {
	$('.css-typing').text(text[0]).addClass("typeClass");
	++i;
}else{

}
	
myInt = setInterval(function() {
	
	if(!$('.css-typing').hasClass("typeClass") && i >= 1 && i < text.length) {

		$('.css-typing').text(text[i]).toggleClass("typeClass")
		++i;
	}
	else{
		$('.css-typing').removeClass("typeClass")

	}
 },2000);
	})

  .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{
 	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;
   }
 }

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

2 个答案: