Question

我正在尝试触发一个CSS动画，但每次点击后都会重新启动它。我知道我可以打开和关闭动画，但我想在每次点击按钮时触发动画。此外，最初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

您可以在动画结束时收听，然后在＆＃39;

上删除课程

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

＆＃13;

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

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

Answer 2

使用：focus。

，而不是使用on click事件

.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，执行此操作而不是准备就绪

实施例 .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

正如Jacob所说，不需要javascript。您可以使用CSS :focus或:target，如该代码笔https://codepen.io/sebilasse/pen/rrOYQj?editors=1100

- 。根 { 外观：无；职位：相对宽度：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>

每次点击都会触发相同的CSS动画

6 个答案: