jQuery apply transition on element on click

Question

I'm trying to apply my fade transition every time I click the button.

What is the best practice to achieve this?

So instead of .addClass() and then .removeClass() after it is added, imagine something like .apply() that would just apply the class once so it doesn't "keep" the class.

Right now I have .toggleClass which only applies the transition every other click (basically like: addClass, removeClass, addClass, and so on). I can think of doing it another way by looking to see if it already has the class, and if not, then remove it and add it again, but it seems so counter-intuitive and makes me think there must be a simpler and cleaner way to do this.

$("#btn").click(function() {
  $("#cat").toggleClass("fade");
})

@import url('https://fonts.googleapis.com/css?family=Yatra+One');

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #eee;
}

.generator {
  height: 400px;
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

#cat {
  height: 300px;
  width: 400px;
  border-radius: 5px;
  transform: scale(1);
  opacity: 1;
}

.fade {
  animation: fade .5s linear forwards;
}

@keyframes fade {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

#btn {
  height: 90px;
  width: 400px;
  outline: none;
  border: none;
  border-radius: 5px;
  background-color: #4682B4;
  color: white;
  font-size: 1.75em;
  font-family: Yatra One;
  transition: background-color 0.1s ease-in-out;
}

#btn:hover {
  cursor: pointer;
  background-color: #508EC3;
}

#btn:active {
  background-color: #4293D8;
}

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

<div class="container">
  <div class="generator">
    <img id="cat" src="https://i.imgur.com/RVQZ9UM.png" alt="cat" />
    <button id="btn">New cat</button>
  </div>
</div>

Ali Sheikhpour · Accepted Answer · 2018-06-02 11:36:29Z

2

You can remove the fade class at the end of animation by listening to the animation events:

$("#cat").bind('oanimationend animationend webkitAnimationEnd', function() { 
   $(this).removeClass("fade");
});

In this case you may use addClass instead of toggleClass.

answered Jun 2, 2018 at 11:36

Ali Sheikhpour

11.4k5 gold badges54 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jos van Weesel Over a year ago

Even though it works nicely, it is still just another way of adding and then removing the class. It is what I want, but I was looking for a way to do this with 1 function. So instead of .addClass() and then .removeClass() after it is added, imagine something like .apply() that would just apply the class once so it doesn't "keep" the class.

Ali Sheikhpour Over a year ago

If you don't like to stuck in CSS classes, you can use jquery.transit plugin to apply all kinds of css animations using jquery just on click. ricostacruz.com/jquery.transit @SirExotic

Jos van Weesel Over a year ago

I was just wondering if there was a way to apply both add- and removeClass in one function, thanks for your help anyway :) I'll take a look at the plugin.

Martin · Accepted Answer · 2018-06-02 11:38:14Z

Using the toogleClass() here might not be the best solution. What happens is :

At startup the <img> doesn't have the .fade class
When you click the button, the class is added, hence launching the keyframe animation
But when you click again, it removes the class
So you have to click one more time to relaunch the animation

But for now I don't have a better way of doing that. And Nandita's answer has actually the same behavior with a bit more code.

Ali's one is actually the best one :

$("#btn").click(function() {
      $("#cat").addClass("fade");
})

$("#cat").bind('oanimationend animationend webkitAnimationEnd', function() { 
   $(this).removeClass("fade");
});

Listening to the animation event to remove the .fade class when the animation is done.

Collectives™ on Stack Overflow

jQuery apply transition on element on click

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related