Javascript JS setTimeout每个间隔添加/删除类

我有一个脚本，它每6秒打印一个新的数组元素。 现在我想将每个间隔添加到一个类（Css动画）中，然后将其删除。因此，每个数字都会淡入淡出，这在我的css动画中。 我曾经尝试过制作整个h2引用的动画，但似乎在使用脚本/css时失去了技巧。 下面是一个活生生的例子：

CSS:

---

我认为添加/删除类不需要超时

可以将动画设置为“重复”，然后在更新编号的同时启动动画

更新了代码，并对更改进行了注释：

编辑：修复了动画与超时不同步的错误。 从和中修复

还将动画/超时设置为1秒。所以测试更多的迭代更容易

var quoteIndex=0；
var quoteJson=[“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“10”]；
var$quote=null；
var setQuote=函数（）{
$quote[0]。style.animation='none'；//删除动画
无效$quote[0]。offsetWidth；//触发回流
$quote[0]。style.animation=null；//重新添加动画
var quote=quoteJson[quoteIndex]；
quoteIndex=（quoteIndex+1）%quoteJson.length；
$quote.text（quote）；
setTimeout（setQuote，1000）；//需要与动画的时间相同
}
jQuery（文档）.ready（函数（$）{
$quote=$（“#quote”）；
setQuote（）；
});
#引用{
文本阴影：0px 0px 13px白色；
文本对齐：居中；
边缘顶部：100px；
字体大小：100pt；
动画：fadeIn 1s线性无限；/*需要与超时时间相同*/
}
@关键帧淡入淡出{
0%{不透明度：0.0；}
80%{不透明度：1.0；}
100%{不透明度：0.0；}
}
我很确定
setTimeout
和jquery动画中的时间参数不能在一段时间内保持同步

与定期更改报价和管理希望保持同步的定期动画不同，我将使用一种方法同时管理这两件事：


var quoteIndex=0；
var quoteJson=[“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“10”]；
var setQuote=函数（）{
var quote=quoteJson[quoteIndex]；
quoteIndex=（quoteIndex+1）%quoteJson.length；
变量元素=$（“#引号”）；
元素动画（{opacity:0}，1000，function（）{//隐藏1s
elem.text（引号）；//隐藏时在此处进行更新
动画元素（{opacity:1}，3000，function（）{//淡入3秒钟
setTimeout（setQuote，2000）；//等待2秒
});
});
};
$（文档）.ready（函数（）{
setQuote（）；
});
#引用{
文本阴影：0px 0px 13px白色；
文本对齐：居中；
边缘顶部：100px；
字体大小：100pt；
}

1
代码在那里-动画是6秒谢谢！一开始这似乎是可行的，但在运行脚本1-2分钟后，它就不再匹配了。动画之间的数字变化。已修复！我想现在它将永远与超时同步谢谢，我也是这么想的。你的exmaple现在可以用了。但它不再是相同的动画，在不透明度缓慢淡入和快速淡出之前。你知道我如何用你的代码做到这一点吗？我完全删除了css动画，而使用了jquery动画。用你喜欢的任何东西来替换我输入的持续时间应该很容易，而且也有宽松的选择：谢谢。你太棒了！我只是对动画中的动画感到困惑，然后是超时。我不明白为什么。如果您愿意，您可以立即再次调用
setQuote
，超时只是为了让quote在完全不透明度下“在那里”一段时间，然后再次开始褪色。相互之间的嵌套是为了在上一个动画完成后执行内部代码。
   var quoteIndex = 0;
var quoteJson = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];


var setQuote = function() {

    var quote = quoteJson[quoteIndex];
    quoteIndex = (quoteIndex + 1) % quoteJson.length; 
    setTimeout(setQuote, 6000);
    $("#quote").text(quote);
  }


  jQuery( document ).ready(function($) {
    setQuote();
    });

    #quote {
    text-shadow: 0px 0px 13px white; 
    text-align: center;
    margin-top: 100px;
    font-size: 100pt;
}

.animateQuote {
    animation-name: fadeIn;
    animation-duration: 6s;
    animation-timing-function: linear;
}

@keyframes fadeIn {
    0% {opacity: 0.0;}
    80% {opacity: 1.0;}
    100% {opacity: 0.0;}
}