Триггер такой же анимации CSS при каждом нажатии

Question

Я пытаюсь вызвать анимацию CSS onclick, но перезагружаюсь после каждого щелчка. Я знаю, что я могу включать и выключать анимацию, но я хотел бы просто запускать анимацию каждый раз, когда нажимается кнопка. Кроме того, изначально анимация CSS не должна запускаться. Выполняется только при нажатии.

Это мое перо. http://codepen.io/omarel/pen/JRwpZp

HTML:

<a href="#" class="addtocart">click me</a> 

Jquery:

$('.addtocart').click(function() { 
    $(this).addClass('on'); 
}); 

CSS:

.addtocart { 
    position: relative; 
} 

    .addtocart.on { 
     -webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate; 
     -moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate; 
     -ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate; 
     -o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate; 
     animation: cartbtnFade 0.6s 0.1s 1 linear alternate; 
    } 

@keyframes cartbtnFade { 
    0% { 
     opacity: 0; 
     transform: translateY(-100%); 
    } 

    10% { 
     transform: translateY(-100%); 
    } 

    15% { 
     transform: translateY(0); 
    } 

    30% { 
     transform: translateY(-50%); 
    } 

    40% { 
     transform: translateY(0%); 
    } 

    100% { 
     opacity: 1; 
    } 
} 

Answer 1

Вы можете слушать, когда анимация заканчивается, а затем удалить класс 'на'

var animationEvent = 'webkitAnimationEnd oanimationend msAnimationEnd animationend'; 
$('.addtocart').click(function() { 
    $(this).addClass('on'); 
    $(this).one(animationEvent, function(event) { 
    $(this).removeClass('on') 
    }); 
}); 

$('.addtocart').click(function() { 
 
    $(this).addClass('on'); 
 
    $(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(event) { 
 
    $(this).removeClass('on') 
 
    }); 
 
});

.addtocart { 
 
\t \t position:relative; 
 
    width:100px; 
 
    display:block; 
 
    background-color:#000; 
 
    color:#fff; 
 
    padding:10px; 
 
    text-align:center; 
 
\t } 
 
\t .addtocart.on { 
 
    -webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate; 
 
    -moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate; 
 
    -ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate; 
 
    -o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate; 
 
    animation: cartbtnFade 0.6s 0.1s 1 linear alternate; 
 
\t } 
 

 
@keyframes cartbtnFade { 
 
    0% { 
 
    opacity: 0; 
 
    transform:translateY(-100%); 
 
    } 
 
    10% { 
 
    \t transform:translateY(-100%); 
 

 
    } 
 
    15% { 
 
\t transform:translateY(0); 
 
\t } 
 
\t 30% { 
 
\t transform:translateY(-50%); 
 
\t 
 
\t } 
 
\t 40% { 
 
\t \t transform:translateY(0%); 
 

 
\t } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="addtocart">click me</a>

Answer 2

Вы можете добавлять и удалять класс CSS на каждый клик и для Симметричного запускать CSS только и щелкая, сделать это OnLoad не на готовом

Пример .addClass и .removeClass

Answer 3

Вместо использования на нажмите событие, используйте: focus.

.addtocart:focus { 
    -webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate; 
    -moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate; 
    -ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate; 
    -o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate; 
    animation: cartbtnFade 0.6s 0.1s 1 linear alternate; 
} 

Теперь, когда элемент с классом .addtocart сфокусирован (или нажал на), он будет иметь эти стили. Когда вы нажмете, стили исчезнут.

Answer 4

У меня есть решение, чтобы удалить on класс каждый второй:

var $post = $(".addtocart"); 

setInterval(function() { 
    $post.removeClass("on"); 
}, 1000); 

http://codepen.io/anon/pen/NRZykG

Answer 5

Вы можете использовать .delay() и .queue()/dequeue(), если вы хотите добавить/удалить класс:

$('.addtocart').click(function() { 
    $(this).addClass('on').delay(500).queue(function(){ 
    $(this).removeClass('on').dequeue(); 
    }); 
}); 

Надеется, что это помогает.

$('.addtocart').click(function() { 
 
    $(this).addClass('on').delay(500).queue(function(){ 
 
    $(this).removeClass('on').dequeue(); 
 
    }); 
 
});

.addtocart { 
 
    position:relative; 
 
    width:100px; 
 
    display:block; 
 
    background-color:#000; 
 
    color:#fff; 
 
    padding:10px; 
 
    text-align:center; 
 
} 
 
.addtocart.on { 
 
    -webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate; 
 
    -moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate; 
 
    -ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate; 
 
    -o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate; 
 
    animation: cartbtnFade 0.6s 0.1s 1 linear alternate; 
 
} 
 

 
@keyframes cartbtnFade { 
 
    0% { 
 
    opacity: 0; 
 
    transform:translateY(-100%); 
 
    } 
 
    10% { 
 
    transform:translateY(-100%); 
 

 
    } 
 
    15% { 
 
    transform:translateY(0); 
 
    } 
 
    30% { 
 
    transform:translateY(-50%); 
 

 
    } 
 
    40% { 
 
    transform:translateY(0%); 
 

 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="addtocart">click me</a>