синхронизации времени CSS анимации (от)

Question

http://jsfiddle.net/7nm7xpwa/

Смотрите код здесь^

В принципе у меня есть класс, который я добавляю к 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

Я пробовал это в течение последних двух часов, я нашел это сложным и забавным, но я не мог найти идеальное решение.

Я не нашел способ просто следовать предыдущей анимации, поэтому мне нужно было сбросить все классы selected и добавить их обратно.

Способ, которым я получил эту (несколько) работу, состоял в том, что функция 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'); 
}); 

Вот дополненная скрипку: http://jsfiddle.net/7nm7xpwa/9/

EDIT: Я нашел его! Вот полное решение вышеупомянутого трюка (сброс анимации).Это в основном удаляет элемент полностью, то вновь добавляет его, таким образом, сбрасывая анимации:

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

Вот новая скрипка: http://jsfiddle.net/7nm7xpwa/10/

EDIT # 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/

Answer 2

Есть несколько подходов, которые можно предпринять.

Подделка - просто прикройте оригинал псевдоэлементом или что-то еще, и нажмите клик, чтобы удалить накладку. Единственным недостатком этого является то, что анимация все еще работает, когда она закрыта, но это не должно быть проблемой, если вы только анимации нескольких элементов. Если вы анимировать много элементов, которые вы не должны использовать CSS-анимацию, в первую очередь, скорее всего,

Подождите animationIteration - Проверьте, чтобы увидеть, если первый анимированные, если так начать другие, когда animationIteration пожаров , Недостатком является то, что будет небольшая задержка перед анимации после первого запуска

Отслеживайте общее время анимации - запуск таймера при первом нажатии (или выше), установите анимации задержку к отрицательному значению, синхронизирующемуся с текущим временем, когда нажимаются следующие. Это относительно сложно сделать точно.