时间戳

首页 > 解决方案 > 在javascript中添加过渡到更改文本

javascript - 在javascript中添加过渡到更改文本

问题描述

我有下面的代码来更改间隔的文本。我想在更改文本时为不透明度添加过渡。还有其他答案使用 jquery 的淡入和淡出方法，但不适用于给定的 javascript 代码。

var text = ["Welcome", "Hi", "Sup dude"];
var counter = 0;
var elem = document.getElementById("changeText");
var inst = setInterval(change, 1000);

function change() {
  elem.innerHTML = text[counter];
  counter++;
  if (counter >= text.length) {
    counter = 0;
    // clearInterval(inst); // uncomment this if you want to stop refreshing after one cycle
  }
}
<div id="changeText"></div>

更新代码

function change() {
      elem.innerHTML = text[counter];
      document.getElementById('s2main').style.opacity = 1;
      counter++;
      if (counter >= text.length) {
        counter = 0;
        // clearInterval(inst); // uncomment this if you want to stop refreshing after one cycle
      }
    }

添加了 CSS

#changetext{
opacity:0;
transition: opacity 400ms

过渡仅适用于第一个文本，并且过渡需要 3 秒。

标签： javascriptjqueryreactjstwitter-bootstrapdom

解决方案

最简单的方法是使用 css 转换：

#changeText {
    transition: opacity 400ms;
}

然后您可以使用 JS 设置不透明度值，甚至可以删除/添加不同的类来加速或删除效果。

由于您标记了 jQuery 但似乎没有使用任何标签，因此 jQuery 内置了淡入淡出动画：

$('#changeText').finish().fadeTo(300, 0, function() {
    // do stuff
    // fade back in again
    $('#changeText').finish().fadeTo(300, 1);
});

推荐阅读