JQ плавное появление HTML

168

27 октября 2018, 12:20

Есть код, который добавляет текст в DIV элемент:

$(myDiv).html(myText);

Текст в элементе появляется моментально, как сделать что бы он появлялся плавно?

Answer 1

источник https://stackoverflow.com/q/11679567

var qwa = qwa || document.getElementById('qwa') 
let addToQwa = (text = 'some text') => qwa.insertAdjacentHTML('beforeend', `<span>${text}</span>`) 
setTimeout(() => { 
  addToQwa() 
  setTimeout(() => { 
    addToQwa('some new text') 
  }, 1e3); 
}, 1e3);

#qwa span { 
  margin-left: 0.5em; 
  /* font-size: 21px; */ 
  text-align: center; 
  -webkit-animation: fadein 2s; 
  /* Safari, Chrome and Opera > 12.1 */ 
  -moz-animation: fadein 2s; 
  /* Firefox < 16 */ 
  -ms-animation: fadein 2s; 
  /* Internet Explorer */ 
  -o-animation: fadein 2s; 
  /* Opera < 12.1 */ 
  animation: fadein 2s; 
} 
 
@keyframes fadein { 
  from { 
    opacity: 0; 
  } 
  to { 
    opacity: 1; 
  } 
} 
 
 
/* Firefox < 16 */ 
 
@-moz-keyframes fadein { 
  from { 
    opacity: 0; 
  } 
  to { 
    opacity: 1; 
  } 
} 
 
 
/* Safari, Chrome and Opera > 12.1 */ 
 
@-webkit-keyframes fadein { 
  from { 
    opacity: 0; 
  } 
  to { 
    opacity: 1; 
  } 
} 
 
 
/* Internet Explorer */ 
 
@-ms-keyframes fadein { 
  from { 
    opacity: 0; 
  } 
  to { 
    opacity: 1; 
  } 
} 
 
 
/* Opera < 12.1 */ 
 
@-o-keyframes fadein { 
  from { 
    opacity: 0; 
  } 
  to { 
    opacity: 1; 
  } 
}