добавление эффекта фейдина с помощью inner.HTML - PullRequest
Новая
       8

добавление эффекта фейдина с помощью inner.HTML

0 голосов
/ 03 сентября 2018

Поиск постепенного добавления контента при использовании 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, если нужно?

Ответы [ 2 ]

0 голосов
/ 03 сентября 2018

Может быть, вы можете попытаться использовать непрозрачность, установленную на старый = от нуля до нового = один, при изменении текста.

Опция : Использование 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>
0 голосов
/ 03 сентября 2018

Это легко сделать с помощью 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>
...