Question

最近我一直在学习一些javascript来改进我的网页。

我尝试做一个简单的练习，其中我每5秒更换一个元素，但是当我尝试使用css添加fadein动画并且仅适用于第一次时，此时我真的不知道我的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 但也添加了下面的代码和注释。

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

希望你喜欢！

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

2 个答案: