Javascript 如何使用jQuery动态添加删除线文本动画？

我的要求是添加删除线，即使用CSS和jQuery从左到右动态地在文本上添加删除线。我尝试添加动画，但当文本更改时，罢工仍然存在，我想在下一个间隔重置罢工，然后添加罢工，反之亦然

下面是工作小提琴

我试图实现的目标示例：

var text=[“这”、“是一个”、“示例”]；
var计数=0；
函数changeText（）{
$（“删除跨距”）.text（text[count]）；
document.getElementById（“示例”）.style.transform=“transition:transform 1000s立方贝塞尔（.55,0,1,1）；”
计数<3？计数++：计数=0；
}
设置间隔（changeText，500）
。删除线{
显示：内联块；
位置：相对位置；
过渡：所有0.5s三次贝塞尔（.55,0,1,1）；
背景色：透明；
}
删除线：之后{
内容：''；
位置：绝对位置；
显示：块；
宽度：100%；
高度：2倍；
边缘顶部：-0.7em；
背景：清晰；
变换原点：左中；
动画：改变3s 5s无限，删除3s 5s立方贝塞尔（.55,0,1,1）1；
}
@关键帧删除线{
从{
变换：scaleX（0）；
}
到{
变换：scaleX（1）；
}
}
@关键帧改变{
0% {
背景颜色：黑色
}
100% {
背景颜色：黑色
}
}

开始
我的第一个解决方案是使用
position:absolute添加一个包装器和另一个
div
。带绝对值的div将是您的行。它看起来像这样：


var text=[“这”、“是一个”、“示例”]；
var计数=0；
//var-active=true；
函数changeText（）{
$（'.line'）.addClass（'line_disabled'））
$（'.line'）.width（'0px'））
$（“删除跨距”）.text（text[count]）；
$（'.line'）.removeClass（'line_disabled'））
$（'.line'）.width（$（$span.删除线”）.width（）
计数<2？计数++：计数=0；
}
设置间隔（changeText，1000）
。删除线{
显示：内联块；
位置：相对位置；
过渡：所有0.5s三次贝塞尔（.55,0,1,1）；
背景色：透明；
}
.包装纸{
位置：相对位置；
}
.线路{
位置：绝对位置；
保证金：自动；
左：0；
排名：0；
底部：0；
高度：2倍；
背景色：黑色；
过渡期：所有0.6秒缓解；
}
.line_已禁用{
宽度：0px！重要；
过渡：无；
}

开始
我不清楚，您到底想得到什么样的结果。你想看看单词是如何逐渐改变彼此的，平滑地禁用“行通过”css属性吗？我想在文本上添加罢工，当下一次进来时，我想在几秒钟后添加罢工。目前在我的代码中，每次都会有罢工。我想这就是她想要的：@SirExotic是的，我的要求是this@divyadave我想我的最新答案是你想要的我想让罢工响应当前罢工不是文字时，屏幕大小改变。我试着让左，因为%仍然不起作用，你知道怎么做吗？