编号样式的动态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属性“动画延迟”设置为计算的延迟。比方说，如果您单击类.delay-6，该类的动画延迟属性将被设置为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

希望这能有所帮助。