同步css动画时间（从到）

请参见此处的代码^

基本上，我有一个类，我正在添加到一个div中，它可以设置背景位置的动画，创建一个移动的条纹效果（比如理发杆）。该类在单击事件中添加，因此，背景动画的开始和停止在单击后不久开始。当使用多个div时，它们通常不同步。是否有办法确保单击的第二个div的动画与单击的第一个div上的相同动画同步

谢谢你抽出时间

代码也在这里：

CSS

JS

HTML

---

您可以采取以下几种方法

伪造它-只需用伪元素或其他东西覆盖原始内容，然后单击“删除覆盖”。这样做的唯一缺点是，动画在覆盖时仍在运行，但如果您只对少数元素设置动画，则这不应成为问题。如果你正在制作很多元素的动画，那么首先你不应该使用CSS动画

等待-检查第一个是否已设置动画，如果已设置动画，则在触发

动画迭代

时启动另一个。这样做的缺点是，在第一次启动动画之前会有一点延迟

---

跟踪动画总时间-单击第一个（或之前）时启动计时器，在单击下一个时将动画延迟设置为与当前时间同步的负值。准确地做到这一点相对比较困难。

我在过去的几个小时里一直在尝试，我发现这很有挑战性，也很有趣，但我找不到完美的解决方案

我找不到只跟随上一个动画的方法，所以我需要重置所有

选定的

类并将它们添加回去

我实现这个（某种程度上）的方法是使用

delay

函数将其设置为与动画相同的时间，立即删除并重新添加类，但不幸的是效果并不相同

以下是我的想法：

$('.pixel').click(function () {
    $('.pixel').each(function () {
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected').delay(2000).queue(function(){
                $(this).addClass('selected').dequeue();
            }); 
        }
    });
    $(this).addClass('selected');
});

以下是更新的小提琴：

编辑：我找到了！下面是上述技巧的完整解决方案（重置动画）。它基本上会完全删除元素，然后重新添加，这样可以重置动画：

$('.pixel').click(function () {
    $('.pixel').each(function () {
        if ($(this).hasClass('selected')) {
            var elm = this,
                newone = elm.cloneNode(true);
            elm.parentNode.replaceChild(newone, elm);
        }
    });
    $(this).addClass('selected');
});

资料来源：

这是新提琴：

编辑#2：在上面关于CSS-TRICKS的文章的评论中，我发现了一种更简单的方法来进行动画重置/元素替换，如下所示：

$('.pixel').click(function () {
    $('.pixel').each(function () {
        if ($(this).hasClass('selected')) {
            $(this).replaceWith($(this).clone(true)); // turned this into a 1 liner
        }
    });
    $(this).addClass('selected');
});

---

另一个版本的小提琴：哇！这是一个非常有趣的处理方法。谢谢你抽出时间。。。。我将等待，直到我为这个问题指定一个“获胜者”。希望有其他可能。这是一个非常好的挑战。。。如果您能够想出如何立即删除和添加一个类，那么基本上就完成了！祝你好运很抱歉反应太晚（从代码中取消了周末），但这真是太棒了！也使用了很酷的概念。例如，有没有办法将一个元素的背景与其他元素的背景实时绑定？我可以让一个div运行动画，然后所有其他div都引用那个div？你尝试过我列出的方法吗？@ZachSaucier不幸的是，你的方法只是理论。。。看看我的答案，寻找一个实用且经过测试的解决方案；）@webeno从什么时候开始答案需要代码？我已经将这三种方法应用于不同的项目中，并且知道每种方法都有效。提供OP所需的精确代码远远不够required@ZachSaucier我不认为我说过你的答案需要代码，我只是说这是理论，我的是实践，两者都是事实。然后是社区和OP决定他们更喜欢/最喜欢哪一个…；）

$('.pixel').click(function () {
    $('.pixel').each(function () {
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected').delay(2000).queue(function(){
                $(this).addClass('selected').dequeue();
            }); 
        }
    });
    $(this).addClass('selected');
});

$('.pixel').click(function () {
    $('.pixel').each(function () {
        if ($(this).hasClass('selected')) {
            var elm = this,
                newone = elm.cloneNode(true);
            elm.parentNode.replaceChild(newone, elm);
        }
    });
    $(this).addClass('selected');
});

$('.pixel').click(function () {
    $('.pixel').each(function () {
        if ($(this).hasClass('selected')) {
            $(this).replaceWith($(this).clone(true)); // turned this into a 1 liner
        }
    });
    $(this).addClass('selected');
});