Разница между append, html? - PullRequest
Новая
       7

Разница между append, html?

0 голосов
/ 26 апреля 2018

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

Создание его HTML 

else if(theme == 'watch-and-circular-bar') {
var countdown_text = '<div id="countdown"><svg class="svgCountDown"><text  x="50" y="50" font-family="Verdana" font-size="20" fill="black" text-anchor="middle" alignment-baseline="top">22</text><circle r="18" cx="50" cy="50" stroke="red" fill="none"></circle><circle class="d" r="18" cx="50" cy="50" style="stroke-dashoffset:0px; animation-duration: 10s;"></circle></svg></div>';
}

Добавление CSS 

.svgCountDown {
  width: 100px;
  height: 100px;
  transform: rotateY(-180deg) rotateZ(-90deg);
}

.svgCountDown circle.d {
  stroke-dasharray: 113px;
  stroke-linecap: round;
  stroke-width: 2px;
  stroke: black;
  fill: none;
  animation: countdown linear infinite forwards;
}

@keyframes countdown {
  to {
    stroke-dashoffset: 113%;
  }
}

и, наконец, добавление его 

$('#ubundle_discount_countdown').html(countdown_text);

Однако, если я использую html, он добавляет его на страницу, но анимация никогда не запускается, если я использую .append или.innerHTML анимация запускается, но она добавляет ее на мою страницу каждые несколько секунд, есть идеи?

1 Ответ

0 голосов
/ 26 апреля 2018

Попробуйте .empty().append() вместо .html()! .html() перезаписывает содержимое. Таким образом, .empty() очистится и .append() будет работать как обычно. 

$('#ubundle_discount_countdown').empty().append(countdown_text);
...