Question

我认为这是一个非常简单的问题。

我有一个脚本来替换我网站上的文本。我希望在替换时添加淡入淡出效果。我该怎么办？

var target = document.getElementById('target');
var titles = [
  'Text1',
  'Text2',
  'Text3'
];

function newTitle () {
    var i = (Math.random() * titles.length) | 0;
    target.innerText = titles[i];
}

newTitle();

            <p id="target"></p>
            <button onclick="newTitle()">Replace</div>

Answer 1

这里是一个例子。我利用setInterval并随着时间的推移更改了文本的opacity-只是普通的JavaScript

var target = document.getElementById('target');
var titles = [
  'Text1',
  'Text2',
  'Text3'
];


function newTitle() {  
document.getElementById("trigger").disabled = true;
var i = (Math.random() * titles.length) | 0;
  var width = 0;
  var opacity = 0;
  target.style.opacity = opacity; 
  target.innerText = titles[i];
  var c = setInterval(fade, 100);
  function fade() {
    if (opacity>1) {
      clearInterval(c);
document.getElementById("trigger").disabled = false;
      return;
    } else {
      opacity += 0.1;
      target.style.opacity = opacity; 
    }
  }
  
}

<p id="target">Text1</p>
            <button id="trigger" onclick="newTitle()">Replace</div>

Answer 2

向transition添加CSS效果，特定于opacity。
在函数中，将元素的不透明度更改为0。
在更改文本之前添加超时（使用过渡效果中添加的同一时间）。
当计时器结束时，将文本和不透明度更改回1。

请参见以下代码：

var target = document.getElementById('target');
var titles = [
  'Text1',
  'Text2',
  'Text3'
];

function newTitle () {
    var i = (Math.random() * titles.length) | 0;
    target.style.opacity = "0";
    setTimeout(function(){
      target.innerText = titles[i];
      target.style.opacity = "1";
    }, 600);
}


newTitle();

#target{
  transition: opacity .6s ease;
}

<p id="target"></p>
<button onclick="newTitle()">Replace</div>

CSS或jQuery /如何为getElementById添加渐变？

2 个答案: