设置动态值css动画笔划破折号

Question

我正在尝试从Javascript绑定stroke-dashoffset。 我想用变量this.waittime代替20多岁。 怎么做？

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

Answer 1

由于this.waitime只是一个变量，您可以将字符串和该变量连接在一起，以使您所需的字符串如下所示，

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

Answer 2

最简单的方法是使用模板字符串。
基本上，它们使您可以将变量直接写到给定的字符串中，并用给定时间的任何值替换它。
模板字符串以反引号开头和结尾，请参见以下示例：

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