Reversing CSS transition on removal of class

Question

I'm trying to get a CSS transition to work in a particular order.

Step 1) On click (on adding a class), I want the element to expand horizontally and then vertically

Step 2) On the next click (on removing a class), I want it to reverse the procedure (collapse vertically and then horizontally).

I have Step 1 done. I staggered the values in the transition property and it works just fine. To reverse it, I used the technique described in this code block at this website (under "Getting It to Reverse"). However, when clicking (and removing the "cover-all--active" class), the transition does not go in the reverse order as expected. Furthermore, applying a transition property to the active state breaks the transition for Step 1.

Please refer to my Codepen to see what I'm talking about: http://codepen.io/usern4me/pen/YNRKqr

My HTML:

<div class="cover-all"></div>

And my CSS:

.cover-all {
    background-color: blue;
    border-radius: 50px;
    color: white;
    cursor: pointer;
    height: 28px;
    overflow: hidden;
    right: 20px;
    top: 29px;
    transition: 
        border-radius 0.75s,
        width 0.75s,
        right 0.75s,
        height 0.75s 0.75s,
        top 0.75s 0.75s;
    width: 70px;
}

.cover-all.cover-all--active {
    top: 0;
    right: 0;
    height: 420px;
    width: 100%;
    border-radius: 0;
    /*  transition: height 0.75s, top 0.75s, border-radius 0.75s 0.75s, width 0.75s 0.75s, right 0.75s 0.75s; */
}

The active state transition is currently commented out so, like stated above, the transition is how I want it to be when the element is first clicked (and the class is applied) BUT clicking to remove the class does not reverse the transition. And if you uncomment the "cover-all--active" class transition, neither transition works correctly.

Please help me before I scream any more obscenities at my computer.

Many thanks!!

Answer 1

You need to swap the transitions.

Here is a related question that I answered with a similar explanation.

In your specific case, here is what is happening:

• The transition that is applied on the selector .cover-all is the second transition which is triggered when the class .cover-all--active is removed. The reason it is not the first transition, as you may expect, is because the transition from the other selector is overriding the transition declared by this selector.

• Likewise, the transition applied on the selector .cover-all.cover-all--active is the first transition which is triggered when the class .cover-all--active is added. This is because the transition from the selector .cover-all.cover-all--active overrides the previous transition, which consequentially means that it is the first transition.

Updated Example

.cover-all {
  /* ... other styles ... */

  /*
    This is the second transition that is triggered.
    It will occur when the class ".cover-all--active" is removed.
  */
  transition:
    border-radius 0.75s 0.75s,
    width 0.75s 0.75s,
    right 0.75s 0.75s,
    height 0.75s,
    top 0.75s;
}

.cover-all.cover-all--active {
  /* ... other styles ... */

  /*
    This is the first transition that is triggered.
    It will occur when the class ".cover-all--active" is added.
  */
  transition:
    border-radius 0.75s,
    width 0.75s,
    right 0.75s,
    height 0.75s 0.75s,
    top 0.75s 0.75s;
}

You can also simplify your jQuery since this refers to the .cover-all element:

$('.cover-all').on('click', function() {
  $(this).toggleClass('cover-all--active');
});

Full code snippet:

$('.cover-all').on('click', function() {
  $(this).toggleClass('cover-all--active');
});

.cover-all {
  background-color: red;
  border-radius: 50px;
  color: white;
  cursor: pointer;
  height: 28px;
  overflow: hidden;
  right: 20px;
  top: 29px;
  width: 70px;
  transition: border-radius 0.75s 0.75s, width 0.75s 0.75s, right 0.75s 0.75s, height 0.75s, top 0.75s;
}
.cover-all.cover-all--active {
  top: 0;
  right: 0;
  height: 420px;
  width: 100%;
  border-radius: 0;
  transition: border-radius 0.75s, width 0.75s, right 0.75s, height 0.75s 0.75s, top 0.75s 0.75s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cover-all"></div>