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

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 动画保持同步。 I've created a CodePen 还用 cmets 添加了下面的代码。

// 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

我建议对您的情况使用 only css 和 no 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>

希望你喜欢！