Css动画重播不起作用

Question

所以我制作了这个动画，其中一个数字从一侧移动到另一侧然后消失，但它只在第一次起作用。 当我再次点击它不起作用。为什么呢？

＆＃13;

＆＃13;

$(document).ready(function() {
  var x = 0;
  $('.hit-btn').on('click', animate);
  function animate() {
    $('#number').removeClass('animate');
    $('#number').addClass('animate');
    x += 1;
    $("#number").html(x);
  }
});

＆＃13;

body {
  font-family: 'Droid Sans', sans-serif;
}
#wrapper {
  width: 800px;
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
  text-align: center;
}
.rotate {
  font-size: 50px;
  border: 1px solid black;
  width: 150px;
  display: inline-block;
  margin-top: 20px;
  -webkit-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  transform: rotate(-25deg);
}
.hit-btn {
  width: 100px;
  height: 30px;
  display: block;
  margin: 0 auto;
  margin-top: 40px;
}
#number {
  position: absolute;
}
.number-space {
  margin-right: 80px;
  background-color: yellow;
}
.hit-text {
  float: right;
}
#number.animate {
  -webkit-transform: translate(60px, 0);
  -moz-transform: translate(60px, 0);
  transform: translate(60px, 0);
  -moz-transition 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  left: -20px;
}

＆＃13;

<div id="wrapper">
  <div class="rotate">
    <div class="number-space">
      <span id="number">0</span>
    </div>
    <div class="hit-text">hits</div>

  </div>
  <button class="hit-btn">hit</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/Pleinair/x0far3dt/3/

Answer 1

$(document).ready(function() {


var x = 0;

$('.hit-btn').on('click', animate);

function animate(){

$('#number').removeClass('animate');
setTimeout(function(){
		$('#number').addClass('animate');	
},0);

x+=1;

$("#number").html(x);

}

});

body{
	font-family:  'Droid Sans', sans-serif;
}

#wrapper{
	width:800px;
	height:400px;
	border:1px solid black;
	margin: 0 auto;
	text-align: center;
}


.rotate{
	font-size:50px;
	border:1px solid black;
    width:150px;
    display: inline-block;
    margin-top:20px;
	-webkit-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    transform: rotate(-25deg);
}

.hit-btn{
	width:100px;
	height:30px;
	display:block;
	margin: 0 auto;
	margin-top:40px;
}

#number{
	position:absolute;

}

.number-space{

	margin-right: 80px;
	background-color: yellow; 
	
}

.hit-text{
	float:right;
}


#number.animate {
	-webkit-transform: translate(60px,0);
	-moz-transform: translate(60px,0);
	transform: translate(60px,0);

	-moz-transition 0.5s;
	-webkit-transition: 0.5s;
	transition: 0.5s;

	left:-20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">	

	<div class="rotate">
		<div class="number-space">
			<span id="number">0</span>
		</div>	
			<div class="hit-text">hits</div>

	</div>

	<button class="hit-btn">hit</button>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

您可以尝试使用setTimout 0ms技巧。

$(document).ready(function() {


    var x = 0;

    $('.hit-btn').on('click', animate);

    function animate(){

         $('#number').removeClass('animate');
         setTimeout(function(){
              $('#number').addClass('animate'); 
         },0);

         x+=1;

         $("#number").html(x);

    }

});

https://jsfiddle.net/x0far3dt/4/

CSS非常奇怪。