css переход завершен до заданных секунд - PullRequest
Новая
       22

css переход завершен до заданных секунд

0 голосов
/ 23 апреля 2019

создал SVG-круг, используя путь, заполняя обводку анимацией за определенные секунды. анимация завершена до истечения заданных секунд. как решить 

<svg class="progress" id="value-svg" viewBox="0 0 115 115" data-value="66">

    <path class="bg" 
      d="M 107,57 A 50,50 0 0 1 56,107 50,50 0 0 1 6,57 50,50 0 0 1 56,6 50,50 0 0 1 107,57 Z" 
      style="fill:none;stroke-width:12;stroke-opacity:1" />
    <path class="meter" 
      d="M 107,57 A 50,50 0 0 1 56,107 50,50 0 0 1 6,57 50,50 0 0 1 56,6 50,50 0 0 1 107,57 Z" 
      style="fill:none;stroke-width:12;stroke-opacity:1" 
      stroke-dasharray="318" stroke-dashoffset="318" />

    <text x="50%" y="50%" id="progress-text" text-anchor="middle" dy=".3em">04:00</text>
</svg>

и установить значение смещения штрихов из сценария 

 value[i].style.transition = value[i].style.WebkitTransition = `stroke-dashoffset ${this.waitime}s ease-in-out`;
        value[i].style.strokeDashoffset = '0';
...