javascript - 平滑变化的文本

Question

我试图在我的网站上每分钟添加一些自动更改的文本。我对我的代码很满意，但我想要更流畅的动画，所以内容出现和消失的速度更慢。有什么想法吗？

var cit = new Array(" Cool APP", " Best App ", " Love this App", " So good ");
var author = new Array("Matt"," Laz ","SoSo","JoJo");
var ind= 0;
function ChangeText(){
  document.getElementById('Citation').innerHTML = cit[ind];
  document.getElementById('author').innerHTML = author[ind];          
  if(ind < cit.length - 1 ){
    ind++;
  }else{
    ind = 0;
  }
  setTimeout("ChangeText();", 400);
}
ChangeText();

<p id = "Citation">
</p>
<p id = "author">
</p>

Answer 1

我们可以利用一些 css 转换并扩展您的 javascript 和 html 以获得所需的功能。代码在下面的文字描述下面。

通过 css，我们可以告诉浏览器在目标持续时间内使用不同的动画技术(ease-in、ease-out 等)更改某些属性。以下默认为 ease 过渡，超过 1 秒，目标是对遵循 css 选择器/规则的给定元素的任何 opacity 更改(有关更多信息，请参见 w3 schools transitions) .

transition: opacity 1s;

现在设置 html/javascript 以使用转换。我们想要制作一些 html 元素，这些元素将随着下一个引用/作者来回切换。当我们增加目标引用/作者时，这些基本上会淡入/淡出。我们需要使用一些绝对定位，以便元素重叠，我们需要一些包含 div 的帮助来完成工作(请参阅下面的 HTML 和 css，注意我正在做 1 秒的转换)。

定义我们的 HTML 后，我们必须更新 javascript 以设置下一个和原始策展/作者的 innerHTML(请参阅更新的 ChangeCitation1() 和 ChangeCitation2() 下面的方法，请注意切换文本的 2 秒延迟，对于您来说，这可能会在生产中设置为 60 秒)。

基本上，我们有一个切换功能，可以在面板上设置 curations/authors 和 curations/authors 并无限地翻转不透明度。淡入淡出 1 秒，每 2 秒更改一次文本。

var cit = new Array(" Cool APP", " Best App ", " Love this App", " So good ");
var author = new Array("Matt"," Laz ","SoSo","JoJo");
var ind= 0;
document.getElementById('Citation1').innerHTML = cit[ind];
document.getElementById('Author1').innerHTML = author[ind]; 
ChangeCitation2();
function ChangeCitation2(){
  incrementIndex()
  document.getElementById('Citation2').innerHTML = cit[ind];
  document.getElementById('Author2').innerHTML = author[ind]; 
  document.getElementById('Citation1').style.opacity = 0;
  document.getElementById('Author1').style.opacity = 0;
  document.getElementById('Citation2').style.opacity = 1;
  document.getElementById('Author2').style.opacity = 1;
  setTimeout(ChangeCitation1, 2000);
}
function ChangeCitation1(){
  incrementIndex();
  document.getElementById('Citation1').innerHTML = cit[ind];
  document.getElementById('Author1').innerHTML = author[ind];
  document.getElementById('Citation1').style.opacity = 1;
  document.getElementById('Author1').style.opacity = 1;
  document.getElementById('Citation2').style.opacity = 0;
  document.getElementById('Author2').style.opacity = 0;
  setTimeout(ChangeCitation2, 2000);
}
function incrementIndex(){
  if(ind < cit.length - 1 ){
    ind++;
  }else{
    ind = 0;
  }
}

#Citation1, #Author1{
    transition: opacity 1s;
}
#Citation2, #Author2{
    transition: opacity 1s;
    position:absolute;
    top:0px;
    margin-top:0px
}
#citationContainer, #authorContainer{
    position:relative;
}

<div id="citationContainer">
    <p id = "Citation1"></p>
    <p id = "Citation2"></p>
</div>
<div id="authorContainer">
    <p id = "Author1"></p>
    <p id = "Author2"></p>
</div>

您可能会扩展以下内容以使用伪元素 ::before 或 ::after，并在 css 中操作它的 content ...但这是您深入研究的良好起点!