javascript - 如何给已有的js代码添加淡入淡出效果

Question

基本上我有这段代码 Hook 到网站中的某个元素并覆盖它的内容。在此示例中，它覆盖现有文本以使其经常更改。但是，当它循环浏览预设文本行时，它只是在没有动画的情况下跳跃。是否可以在预设文本之间添加淡入淡出动画？

代码如下:

    var text = ["Question Everything!", "Envision the future!", "Change your perspective!"];
    var counter = 0;
    var elem = document.getElementById("slogantxt");
    setInterval(change, 3500);

    function change() {
      elem.innerHTML = text[counter];
      counter++;
    if(counter >= text.length) { counter = 0; }
   }

Answer 1

CSS3 @keyframes 动画在这里会轻很多。

@keyframes fadeOutIn {
  0% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 1;}
}

.fadeOutIn {
  animation-name: fadeOutIn;
  animation-duration: 200ms;
 }

然后在更改内部 HTML 时简单地删除并重新添加该类。

编辑:为简单起见，我省略了必要的 -webkit- 前缀。不要忘记!