编号样式的动态CSS样式

Question

我有四种不同延迟的动画。具体来说，我有四种CSS样式，每种样式都有一种延迟。

他们是：

.delay-1, .delay-2, .delay-3, .delay-4。格式为.delay-[number]。每个都有number*400ms的延迟。是否可以使用某种功能来动态设置延迟？所以如果我有.delay-6，延迟将是6 * 400ms或2400ms。

我似乎无法在Google或stackoverflow上找到任何内容。也许我正在使用错误的措辞来查询错误的东西。

如果可能，我更愿意使用纯CSS。

Answer 1

好吧，假设命名约定是.delay- [number]我写了一个函数来计算特定类的延迟并设置css属性＆＃39; animation-delay＆＃39;点击类计算延迟。假设您单击类.delay-6，该类的animation-delay属性将设置为2400ms。

$('[class^="delay-"]').click(function(){
  var num = this.className.replace(/[^0-9]/g, '')
  var delay = num * 400+'ms';
  this.style.animationDelay = delay;
  console.log("delay for class " + this.className+ " is " + delay);
});

您可以根据用例调整此方法。我不知道在你的情况下应该触发延迟计算的内容，所以点击它就可以了。

这是一个jsbin，你可以玩它：http://jsbin.com/jumomayapo/edit?html,css,js,console,output

希望这有帮助。