平滑更改文本

Smooth changing text

本文关键字：文本 平滑      更新时间：2023-09-26

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

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>

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

使用css，我们可以告诉浏览器在目标持续时间内使用不同的动画技术（ease-in、ease-out等）更改某些属性。以下默认为ease转换，时间超过1秒，目标是对符合css选择器/规则的给定元素进行任何opacity更改（有关更多信息，请参阅w3学校转换）。

transition: opacity 1s;

现在来设置html/javascript以利用转换。我们想要制作一些html元素，这些元素将与下一个引文/作者来回切换。当我们增加目标引文/作者时，这些内容基本上会逐渐消失。我们需要使用一些绝对定位，以便元素重叠，我们需要一些包含div的帮助来完成任务（请参阅下面的HTML和css，注意我正在进行1秒的转换）。

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

基本上，我们有一个切换功能，可以在甲板上设置策展人/作者和策展人-作者，并无限地向后翻转不透明度。淡入淡出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>

您可能可以扩展以下内容以使用psuedo元素::before或::after，并在css中操作它的content。。。但这对你来说是一个很好的起点！

相关文章：