使用 inner.HTML 添加淡入淡出效果答案

【问题标题】：adding fadein effect with inner.HTML使用 inner.HTML 添加淡入淡出效果
【发布时间】：2019-02-08 02:37:12
【问题描述】：

在使用 inner.HTML 时寻找淡入内容。

当前代码；

<td style="width: 20%;" class="responsive-td" valign="top">
          <div id="placeholder1" class="placeholder1" style="color:white;"></div>
        </td>

if (//logic here){

          document.getElementById('placeholder1').innerHTML ='add this with fading effect';

          setTimeout(addFn1, 300);
           function addFn1() {
            document.getElementById('placeholder2').innerHTML ='add this with fading effect';}       

    setTimeout(addFn2, 1200);
           function addFn2() {
            document.getElementById('placeholder3').innerHTML ='add this with fading effect';}
         }

我尝试使用 css，但由于 setTimeout，它没有创建效果。

有没有使用 CSS 或 JS 的简单解决方案？或者如果需要的话，甚至是 jQuery？

【问题讨论】：

也许你可以尝试在更改文本时使用 opacity 设置为 old=zero 到 new=one

标签： javascript jquery css innerhtml

【解决方案1】：

使用 jQuery 很容易做到这一点，因为有类似这样的简单动画方法。

看看.fadeIn()和.fadeOut()。

if (true){

  $('#placeholder1').html('add this with fading effect').fadeIn(600);

  setTimeout(addFn1, 300);
  function addFn1() {
    $('#placeholder2').html('add this with fading effect').fadeIn(600);}       

  setTimeout(addFn2, 1200);
  function addFn2() {
    $('#placeholder3').html('add this with fading effect').fadeIn(600);}
}

body{
  background-color:black;
}
.placeholder1{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td style="width: 20%;" class="responsive-td" valign="top">
  <div id="placeholder1" class="placeholder1" style="color:white;"></div>
  <div id="placeholder2" class="placeholder1" style="color:white;"></div>
  <div id="placeholder3" class="placeholder1" style="color:white;"></div>
</td>

【讨论】：

【解决方案2】：

您可以尝试在更改文本时将不透明度设置为 old=0 到 new=one。

选项：使用 CSS3 和 Js（无 jquery）

document.addEventListener('DOMContentLoaded', function() {
  var quotes = ["Hello", "there", "everyone"];
  var infos = document.querySelectorAll('div.info');
  var repeat = Array.prototype.slice;
  var fadeIn = function(i) {
    if (!infos[i]) {
      return;
    }
    infos[i].innerHTML = quotes[i];
    infos[i].classList.add("open");
  };
  repeat.call(infos).forEach(function(el) {
    var callBack = function(e) {
      var that = this;
      repeat.call(infos).forEach(function(cur, ind) {
        if (cur == that) {
          fadeIn(1 + ind);
          return false;
        }
      });
    };
    el.addEventListener('webkitAnimationEnd', callBack);
    el.addEventListener('animationEnd', callBack);
  });
  fadeIn(0); /* trigger fade */
});

.info {
  opacity: 0;
  filter: alpha(0%);
  border: 1px solid #ccc;
  margin: 1px 2px;
}

@keyframes fade {
  from {
    opacity: 0;
    filter: alpha(0%);
  }
  to {
    opacity: 1;
    filter: alpha(100%);
  }
}

.info.open {
  -webkit-animation: fade .3s;
  -moz-animation: fade .3s;
  -ms-animation: fade .3s;
  -o-animation: fade .3s;
  animation: fade .3s;
  opacity: 1;
  filter: alpha(100%);
}

<div class="info"></div>
<div class="info"></div>
<div class="info"></div>

【讨论】：