每隔几秒钟更改一个元素并与动画同步

Question

最近我一直在学习一些JavaScript来改进我的页面。

我尝试

做一个简单的练习，其中我每 5 秒更改一个元素，但是当我尝试使用 css 添加淡入动画并且仅适用于第一次时，此时我真的不知道我的 javascript 是否编写不正确或它与我的 css 有关。

有更多知识和经验的人可以给我一些提示吗？

好的，所以基本上问题是我无法让动画像句子一样重复，你可以在这里查看：

//Calling the element.
var $slogan = document.getElementById("slogan");
// Setting an array with several strings.
var sloganArray = ["This sentence will change every 5 seconds!", "See? I'm changing!", "Knock Knock.", "Who's there?", "Heck I don't know!"];
//Setting variable to control the index.
var sloganIndex = 0;
/* This function (only when called) replaces the text of the element called before with text contained on the strings of the array, each time incrementing one and going through every array position. */
function changeSlogan() {
    $slogan.innerHTML = sloganArray[sloganIndex];
    ++sloganIndex;
    if (sloganIndex >= sloganArray.length) {
        sloganIndex = 0;
    }
  }
//Calling the function created before every five seconds.
setInterval(changeSlogan,5000);

#slogan {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 20px;
    color: #000;
    opacity: 1;
    transition: opacity .3s ease-out;
    -webkit-animation:fadeIn ease-out ;
    -moz-animation:fadeIn ease-out ;
    animation:fadeIn ease-out;
    -webkit-animation-fill-mode:forward;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forward;
    animation-fill-mode:forward;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-delay: 4.9s; /* Chrome, Safari, Opera */
    animation-delay: 4.9s;
    animation-iteration-count: infinite;
}

<h3 id="slogan"><em>This is a dynamic sentence!</em></h3>

谢谢你的时间！

Answer 1

以为我会尝试使用 requestAnimationFrame 来回答这个问题，这是一种使用 JavaScript 对元素进行动画处理的高性能方法。它使用您机器的内部帧速率，这意味着它将使用更少的内存，并确保它与您添加的任何可能的 CSS 动画保持同步。我创建了一个 CodePen，但也添加了下面的代码和注释。

// All your slogans
const sloganArray = [
  "This sentence will change every 5 seconds!",
  "See? I'm changing!",
  "Knock Knock.",
  "Who's there?",
  "Heck I don't know!"
];
// Initial slogan index
let sloganIndex = 0;
// Slogan container
const element = document.getElementById("slogan");
// Set first slogan on render
element.innerHTML = sloganArray[sloganIndex];
// The last interval in which something changed, starting from 0 and will be updated by the function
let lastIntervalTimestamp = 0;
// Start of function
function render(now) {
  
  // If the interval is 0
  // or "right now" minus timestamp is equal or higher than 5 seconds
  // do the following
  if (!lastIntervalTimestamp || now - lastIntervalTimestamp >= 5 * 1000) {
    
    // Update the timestamp to right now
    lastIntervalTimestamp = now;
    // Update the slogan in the container
    element.innerHTML = sloganArray[sloganIndex];
    
    // Progress the slogan index along by 1
    ++sloganIndex;
    
    // If the slogan index is at the last of the slogan array flip to 0
    if (sloganIndex >= sloganArray.length) {
      sloganIndex = 0;
    }
  }
  
  // Rerun the whole function again when finished, this happens constantly while the animation API runs
  requestAnimationFrame(render);
}
// Start the function when the very first animation frame is requested, aka when the browser is ready
window.requestAnimationFrame(render);

Answer 2

我建议只使用 css 而不是 javascript 来说明您的情况。我创造了三种效果。使用.slogan, .slogan up, .slogan down并将更改的元素放入<p>元素中，如下所示。

检查和这里的 css：http://jsfiddle.net/csdtesting/ncmctw65/1/

要设置的 html

：

<div class="wrapper">
    <h3>Cool fading text only with css try .slogan, .sloga down, .slogan up </h3>
    <div class="slogan down">
        <p><a href="http://www.hongkiat.com/blog/wordpress-related-posts-without-plugins/">This sentence will change every 5 seconds!</a></p>
        <p><a href="http://www.hongkiat.com/blog/wordpress-related-posts-without-plugins/">See? I'm changing!</a></p>
        <p><a href="http://www.hongkiat.com/blog/automate-dropbox-files-with-actions/">Who's there?</a></p>
        <p><a href="http://www.hongkiat.com/blog/wordpress-related-posts-without-plugins/">eck I don't know!</a></p>
    </div>
</div>

希望你喜欢！