Question

我正在尝试创建一个着陆页，其中一系列文本显示在屏幕上并连续旋转。此外，这些文本需要使用类似打字机的效果进行动画处理。我有动画文本工作，但它只适用于第一个文本。当循环浏览其余文本时，它们只会显示在页面上。知道如何解决这个问题吗？我正在考虑尝试使用JavaScript为每个文本刷新添加动画CSS，但这看起来很麻烦而且不是最有效的方法。

＆＃13;

document.addEventListener('DOMContentLoaded', function(event) {
  // array with texts to type in typewriter
  var dataText = ["Hi, I'm Ned.", "Developer.", "Writer."];

  function typeWriter(i) {
    // add next text to h1
    document.querySelector("h1").innerHTML = dataText[i] + '<span aria-hidden="true"></span>';

    // wait for a while and call this function again for next text
    setTimeout(function() {
      typeWriter((i + 1) % 3)
    }, 10000);
  }

  // start the text animation
  typeWriter(0);
});

＆＃13;

.typewriter h1 {
  font-weight: bold;
  color: #000;
  font-family: "Lucida Console";
  font-size: 2em;
  overflow: hidden;
  /*Hide content before animation*/
  border-right: .1em solid white;
  /*Cursor*/
  white-space: nowrap;
  /*Keep text on same line*/
  margin: 0 auto;
  /*Scrolling effect while typing*/
  letter-spacing: .1em;
  animation: typing 3s steps(30, end), blink-caret .75s steps(1, end) infinite alternate;
}


/* The typing effect */

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}


/* The typewriter cursor effect */

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: white;
  }
}

＆＃13;

<div class="jumbotron" id="jumbotron">
  <div class="typewriter">
    <h1></h1>
  </div>
</div>

＆＃13;

Answer 1

这里的问题是，一旦CSS动画完成，它就不会再次触发该元素。你可以实现重复的唯一方法是从该元素中删除css类（带动画），稍等一下然后读取它，或者销毁该元素并重新创建它

对于您的示例，我只需创建一个新的h1 - 元素，编辑其内容并将其添加到DOM。（显然删除旧的）使用jQuery，您可以轻松地使用

var h = $("<h1>");           //creating the element
h.innerHTML = ...;
$(".typewriter").empty();    //remove all children
$(".typewriter").append(h);  //add new h1 element

普通JS方法：

var h = document.createElement("h1"); //creating the element
h.innerHTML = ...;          //setting its content
var typewriter = document.querySelector(".typewriter");
typewriter.innerHTML = '';  //remove all children
typewriter.appendChild(h);  //add the new h1 element

另请注意，您选择查询选择器的方式，这些更改将适用于所有<h1>元素。

Answer 2

我想我可以实现你想要的。看看：

var dataText = [ "Hi, I'm Ned.", "Developer.", "Writer."];
 
    function typeWriter(i) {
        // add next character to h1
        
        var h1 = document.createElement("h1");
        h1.innerHTML = dataText[i] +'<span aria-hidden="true"></span>';
        document.querySelector(".typewriter").append(h1);
        

        // wait for a while and call this function again for next character
        setTimeout(function() {
            document.querySelector(".typewriter").innerHTML = ''; // add if(i === 2) to display the whole phrase
            typeWriter((i + 1)%3)
        }, 10000);
    }

    // start the text animation
    typeWriter(0);

.typewriter h1 {
    font-weight: bold;
    color: orange; 
    font-family: "Lucida Console";
    font-size: 7em;
    overflow: hidden; /*Hide content before animation*/
    border-right: .1em solid white; /*Cursor*/
    white-space: nowrap; /*Keep text on same line*/
    margin: 0 auto; /*Scrolling effect while typing*/
    letter-spacing: .1em;
    animation:
        typing 3s steps(30, end),
        blink-caret .75s steps(1, end) infinite alternate;
}
/* The typing effect */
@keyframes typing {
   from { 
       width: 0
   }
   to { 
       width: 100% 
   }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
   from, to { 
       border-color: transparent 
   } 50% { 
       border-color: white; 
   }
}

<div class="jumbotron" id="jumbotron">
    <div class="typewriter">
        <h1></h1>
    </div>

诀窍是让css动画再次运作。为此，每次我创建一个新的h1元素。显示部分/整个短语后，我只需删除所有h1元素并重复此过程。

Answer 3

你可以使用JQuery来简化它，我还添加了一个在完全显示数据时停止动画的功能。

<script type="text/javascript">
$(function() {
var dataText = [ "Hi, I'm Ned.", "Developer.", "Writer."];
function typeWriter(i) {
 var content = '<h1>' + dataText[i] +'<span aria-hidden="true"></span></h1>'
 $(".typewriter").append(content);
 // wait for a while and call this function again for next character
 var myFunc = setTimeout(function() {
  typeWriter((i + 1)%3)
  }, 10000);
  if (i  == dataText.length - 1) {
   clearTimeout(myFunc);
  }
    }

  // start the text animation
  typeWriter(0);
})
</script>


<div class="jumbotron" id="jumbotron">
    <div class="typewriter">
    </div>
</div>

您可以在那里查看：https://jsfiddle.net/z4cryxx0/2/

如果我回答了你的问题，请告诉我。

Answer 4

您可以将动画设置为无限，并将动画的长度更改为文本更改之间所需的延迟，然后将其设置为3秒后完成（此处为30％）或无论您有多久想要一个动画持续：

.typewriter h1 {
    ...
    animation:
        typing 10s steps(30, end) infinite,
        blink-caret .75s steps(1, end) infinite alternate;
}

@keyframes typing {
   0% {
     width: 0;
   }
   30% {
     width: 100%;
   }
}

这种方法的缺点是，如果要更改文本之间的延迟长度，则必须同时修改JavaScript延迟和CSS动画长度。

JSFiddle

使用JavaScript填充div中的文本，但动画仅适用于第一个文本

4 个答案: