javascript - 如何自动清除翻转动画事件？

Question

$("#button").click(function() {
  $('.transform').toggleClass('transform-active');
});

.box {
  background-color: #218D9B;
  height: 100px;
  width: 100px;
  position:relative;
  margin:0 auto;
}

.transform {
  -webkit-transition: all 2s ease;  
  -moz-transition: all 2s ease;  
  -o-transition: all 2s ease;  
  -ms-transition: all 2s ease;  
  transition: all 2s ease;
}

.transform-active {
transform: translateX(-100%) rotateY(-180deg);
  transform-style: preserve-3d;
}
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box transform">
</div>

<input type="button" id="button" value="Click Me"></input>

我希望这个翻转事件在点击事件发生一次后立即明确。就像单击一次按钮时，框将翻转并返回到自己的位置。我尝试了 removeClass 事件，但它不起作用。请帮帮我T.T

Answer 1

您可以使用animation代替transition一次完成整个动画

$("#button").click(function() {
  $('.transform').toggleClass('transform-active');
});

.box {
  background-color: #218D9B;
  height: 100px;
  width: 100px;
  position:relative;
  margin:0 auto;
}

.transform {
  -webkit-transition: all 2s ease;  
  -moz-transition: all 2s ease;  
  -o-transition: all 2s ease;  
  -ms-transition: all 2s ease;  
  transition: all 2s ease;
}

.transform-active {
  transform-style: preserve-3d;
  animation-name: transflip;
	    animation-duration: 3s;
	    animation-timing-function: linear;
}

@keyframes transflip {
	    0% {
		    transform: translateX(0) rotateY(0);
	    }
      50%{
        transform: translateX(-100%) rotateY(-180deg);
      }
	    100% {
		    transform: translateX(0%) rotateY(0deg);
	    }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box transform">
</div>

<input type="button" id="button" value="Click Me"></input>