css - 同步 CSS 动画时间(从 到 )

Question

http://jsfiddle.net/7nm7xpwa/

请参阅此处的代码 ^

基本上，我有一个类，我将其添加到一个 div 中，该 div 可以对背景位置进行动画处理，从而创建移动的条纹效果(如理发杆)。该类是在单击事件上添加的，因此，背景动画的开始和停止在单击后不久开始。当使用多个 div 时，它们通常会不同步。有没有办法确保单击的第二个 div 的动画与单击的第一个 div 上的相同动画同步？

感谢您的宝贵时间!

代码也在这里:

CSS

.selected {

  background: linear-gradient(
    45deg, 
    rgba(255,255,255, .95)  25%, 
    transparent       25%, 
    transparent       50%, 
    rgba(255,255,255, .95)  50%, 
    rgba(255,255,255, .95)  75%, 
    transparent       75%, 
    transparent
  );  

  background: -webkit-linear-gradient(
    45deg, 
    rgba(255,255,255, .95)  25%, 
    transparent       25%, 
    transparent       50%, 
    rgba(255,255,255, .95)  50%, 
    rgba(255,255,255, .95)  75%, 
    transparent       75%, 
    transparent
  );  

    background: -o-linear-gradient(
    45deg, 
    rgba(255,255,255, .95)  25%, 
    transparent       25%, 
    transparent       50%, 
    rgba(255,255,255, .95)  50%, 
    rgba(255,255,255, .95)  75%, 
    transparent       75%, 
    transparent
  );  


      background: -moz-linear-gradient(
    45deg, 
    rgba(255,255,255, .95)  25%, 
    transparent       25%, 
    transparent       50%, 
    rgba(255,255,255, .95)  50%, 
    rgba(255,255,255, .95)  75%, 
    transparent       75%, 
    transparent
  );  


  animation: barberpole 2s linear infinite;

  -webkit-animation: barberpole 2s linear infinite;

  -moz-animation: barberpole 2s linear infinite;

/* opacity: .9;  */



}

@keyframes barberpole {
  from { background-position: 0 0; }
  to   { background-position: 200px 100px; }
}


@-webkit-keyframes barberpole {
  from { background-position: 0 0; }
  to   { background-position: 200px 100px; }
}


@-moz-keyframes barberpole {
  from { background-position: 0 0; }
  to   { background-position: 200px 100px; }
}



.pixel {
 width: 100px;
    height: 100px;
    background-color: grey;
float:left;
}

JS

$('.pixel').click(function(){

    $(this).addClass('selected');
});

HTML

<div class='pixel'></div>
<div class='pixel'></div>
<div class='pixel'></div>
<div class='pixel'></div>
<div class='pixel'></div>
<div class='pixel'></div>

Answer 1

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

我发现无法仅遵循之前的动画，因此我需要重置所有选定的类并将它们添加回来。

我实现这个(某种程度上)工作的方法是使用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');
});

这是更新后的 fiddle :http://jsfiddle.net/7nm7xpwa/9/

编辑:我找到了!这是上述技巧的完整解决方案(重置动画)。它基本上完全删除元素然后重新添加它，这样重置动画:

$('.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');
});

来源:Restart CSS Animation | CSS-TRICKS

这是新的 fiddle :http://jsfiddle.net/7nm7xpwa/10/

编辑 #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');
});

你的另一个版本:http://jsfiddle.net/7nm7xpwa/11/