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!!