Question

我制作了这个动画here。我必须从外部文件data.txt加载此动画的文本部分。应采用以下格式。

#3 de cada 10 personas mayores de 60 años
*navega por Internet

#58% de los mayores de 60 años
*tiene facebook

#4 de 10 Jovenes Adultos
*quiere trabajar fuera del país

#Add top line with pound sign
*and bottom line with star sign

我写了这个javascript代码来读取data.txt

中的文件

var languages;
var topLine = new Array();
var bottomLine = new Array();
var j = 1;
$.get('data.txt', function(data) {
   languages = data.split("\n")
   divide(languages);
   document.getElementsByClassName("top")[0].innerHTML = topLine[0];
 document.getElementsByClassName("bottom")[0].innerHTML= bottomLine[0];
     var interval1Id = setInterval(function(){
       if(j < topLine.length){
         change(topLine[j],bottomLine[j]);
       }
       else if (j = topLine.length){
         j=0;
         change(topLine[j],bottomLine[j]);
       }
       j= j+1;
     },5000);
});

  function divide(data){
    for (var i = 0; i < data.length; i++) {
        if (data[i].charAt(0)=="#"){
          data[i] = data[i].replace("#","")
          topLine.push(data[i]);
        }
        else if(data[i].charAt(0)=="*"){
          data[i] = data[i].replace("*","")
          bottomLine.push(data[i]);
        }
      }
  }

  function change(top,bottom) {
    document.getElementsByClassName("top")[0].innerHTML = top;
  document.getElementsByClassName("bottom")[0].innerHTML= bottom;
  }

和我添加到各个类的html div的css是：

    .top{
    animation: slideIntop 5s infinite both;
}
.bottom{
    animation: slideInbottom 5s  infinite both;
}

@-webkit-keyframes slideIntop {
    0% {

    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  30% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
    70% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

    100% {

        -webkit-transform: translateX(2000px);
        transform: translateX(2000px);
    }
}

@keyframes slideIntop {
  0% {

    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  30% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
    70% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
      }
    100% {
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px);
    }
}
@-webkit-keyframes slideInbottom {
  0% {

    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  30% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
    70% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

    100% {

        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }
}

@keyframes slideInbottom {
  0% {

    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

    30% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    70% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

    100% {

        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }
}

它应该可以正常工作，但是你在上面的提供中看到动画有一些延迟，我不知道我错过了什么

Answer 1

我试图通过添加一个类来启动成功函数中的动画：

https://stackoverflow.com/a/5771504/3168107

现在正在运作。它与时间（和加载）有关。

这个使用javascript的css3动画无限循环不能正常运行并且延迟运行？

1 个答案: