CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
itagmi
itagmi

Reputation: 55

How to clear flip animation event automatically?

$("#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>

i want to this flip event make clear immediately after when click event happened once. like when click the button one time, the box is going to flip and back to own place. i tried removeClass event, but it is not working. please help me T.T

Upvotes: 1

Views: 246

Answers (2)

Saad Mehmood
Saad Mehmood

Reputation: 731

$("#button").click(function() {
  $('.transform').toggleClass('transform-active');
  setTimeout(() => {
    $('.transform').toggleClass('transform-active');
  },2000); //toggle that class again when animation is complete after 2s
});

Upvotes: 1

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

You can use animation instead of transition for completing whole animation in once

$("#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>

Upvotes: 2

Related Questions