设置动态值css动画stroke-dashoffset

Question

我试图绑定来自Javascript的stroke-dashoffset。 我想用变量this.waittime替换20s。 怎么做？

 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`;