CODEWITHSUNDEEP
javascriptjqueryhtmlcss
1w3j
1w3j

Reputation: 586

CSS transitions not working after removing class

When applying some CSS to this component:

<div id="cart-circle">
      <div id="cart-content">
          <div id="cart-icon" class="text-bordered fa fa-shopping-cart"></div>
          <div id="cart-title" class="text-bordered animated bounceOutRight"></div>
      </div>
 </div>

The problem comes out after removing the class open-cart-circle from the div (with cart-circle class), which is added when the user clicks the circle itself. open-cart-circle tweaks the height, width and border-bottom-left-radius properties, performed by the animation:

@keyframes trigger-cart-circle {
  100% {
    height: 95px;
    width: 495px;
    border-bottom-left-radius: 26%; }
}

and this is how open-cart-circle looks like:

.open-cart-circle {
  animation-delay: 0s;
  animation-duration: 0.8s;
  animation-name: trigger-cart-circle;
  animation-fill-mode: both; 
}

So when open-cart-circle is added the animation begins and I want you to notice animation-fill-mode is intentionally put there in the code since I want the "circle" move smoothly (transitions with 0.5s) while opening and closing the side bar. Because after closing the side bar twice, the CSS transitions seem not to work. Why? I've just got stuck hours...

Here cart-circle must have transition:all because this "circle" should "softly" return to its original shape when closing:

#cart-circle {
  position: fixed;
  z-index: 999;
  box-shadow: 0 8px 11px rgba(0, 0, 0, 0.247);
  top: 0;
  right: 0;
  text-align: right;
  border-bottom-left-radius: 100%;
  border: 0.051px solid #333;
  background-color: #f1c40f;
  cursor: pointer;
  transition: all 0.5s;   /*HERE*/
}

EDIT

Do will-change property have any point here for a possible solution?

Upvotes: 21

Views: 2979

Answers (1)

GramThanos
GramThanos

Reputation: 3622

As you can see, the transition doesn't apply on the animation.

So the solution is simple, rename your trigger-* animations to trigger-open-* and create the corresponding trigger-close-* animations.

Then every time you add the open-* class, remove the close-* class. and every time you remove the open-* class, add the close-* class.

Here is your jsfiddle fixed. https://jsfiddle.net/pu5y8quz/

Upvotes: 16

Related Questions