установить динамическое значение css animation

Question

Я пытаюсь связать штрих-дашоффсет из Javascript.Я хочу заменить 20 с переменной this.waittime.как это сделать?

 this.waitime = 20;
value[i].style.transition = value[i].style.WebkitTransition = 'stroke-dashoffset 20s ease-in-out';

Answer 1

Самый простой способ сделать это - использовать строки шаблона.
В основном они позволяют записать переменную непосредственно в заданную строку и заменить ее на любое значение, которое она имеет в данный момент времени.
Строки шаблона начинаются и заканчиваются обратными метками, см. Этот пример:

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

Answer 2

Поскольку this.waitime - это просто переменная, вы можете объединить строки и эту переменную вместе, чтобы получить желаемую строку следующим образом:

this.waitime = 20;
value[i].style.transition = value[i].style.WebkitTransition = 'stroke-dashoffset ' + this.waitime + 's ease-in-out';