0

Возможно ли, как-то при изменении содержимого DOM - узла анимировать процесс этих изменений?
Допустим, в примере ниже, необходимо, чтобы цифры плавно пропадали/появлялись.

let span = document.querySelector('span');
let i = 0;
setInterval( () => {
  span.textContent = i++;
  },1000);
  
 
<span></span>

1
  • одна на месте другой должна появляться? или как?
    – ThisMan
    28 мая 2019 в 15:58

1 ответ 1

5

let span = document.querySelector('span');
let i = 0;

setInterval(() => {
  span.textContent = i++;
}, 1000);
@keyframes example {
  0% { opacity: 0 }
  50% { opacity: 1 }
  100% { opacity: 0 }
}

span {
  animation-name: example;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
<span />

1
  • Так это не анимация, "при изменении textContent". Это просто - бесконечная анимация синхронизированная с такими же бесконечными изменениями
    – Dmytro
    31 авг 2019 в 17:43

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.