CSS or jQuery: 如何给通过getElementById获取的元素添加淡入淡出效果？

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

将 CSS 效果添加到 transition，特定于 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 or jQuery: 如何给通过getElementById获取的元素添加淡入淡出效果？

CSS or jQuery: How to add a fade effect to an element got with getElementById?

javascript

css

animation

getelementbyid

fade