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

Posted 2023-05-07

【中文标题】使用 inner.HTML 添加淡入淡出效果

【英文标题】：adding fadein effect with 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

【参考方案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>