每次點擊觸發相同的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

您可以在動畫結束時收聽，然后刪除“ on”類

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 { 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> 

Answer 2

不要使用on事件，而是使用：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 3

您可以在每次單擊時添加和刪除css類，以便僅在單擊時運行css，這樣做onload尚未准備好

示例.addClass和.removeClass

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> 

Answer 6

正如雅各布所說，不需要javascript。 您可以在此Codepen中使用CSS :focus或:target https://codepen.io/sebilasse/pen/rrOYQj?editors=1100

-.root {外觀：無； 職位：相對 寬度：120像素； 高度：50px； 過渡：所有.1s線性； 轉換：translate3d（0，0，0）; }

.animation {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  outline: none;
}

@keyframes pulse {
    0%   { opacity: 0; box-shadow: 0 0 0 1px red; }
    40%  { opacity: 0.8; }
    80%  { box-shadow: 0 0 0 80px red; }
    99% { opacity: 0; box-shadow: 0 0 0 0px red; }
}

.root:hover ._focus:focus::after,
.root:target ._target::after {
    content: "";
    display: block;
    position: absolute;
    width: 4px;
    height: 4px;
    box-shadow: 0 0 0 0px red;
    border-radius: 50%;
    z-index: 1;
    left: 20px;
    top: 25px;
    transform: perspective(1px) translate(-50%, -50%);

  animation-name: pulse;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

<h3>crossbrowser animation onClick hacks</h3>
<button class="root">
  <div class="animation _focus" tabindex="0" onanimationend="this.blur()">    
</div>
  contra: steals focus
</button>
<button id="btn_1" class="root">
  <a class="animation _target" href="#btn_1"></a>
  contra: needs id
</button>