CODEWITHSUNDEEP
htmlcss
Steal1702
Steal1702

Reputation: 123

How to start another transition only when one ends in CSS

I was trying to make a navbar transition animation where I want a background color to appear on screen when someone clicks on the hamburger menu button of the navbar. The animation I want is that it first gains a vertical height of 100vh and then gains a width of 100% but when i tried, both animations are working together making it look like its growing out from the top left corner of the screen, I want the vertical height transition to occur first and then the width transition. My code is below

The below code runs when I clicked the hidden checkbox just to trigger the transition effect

&__checkbox:checked ~ &__background--1 {
    bottom: 0;
    width: 100%;
}

And the below code is what I am trying to do to make the transition happen 

&--1 {
    background: red;
    width: 1rem;
    z-index: 15;
    bottom: 100%;
    transition: bottom .3s, width 1s;
    transition-delay: width 1s;
}

I am just trying but its just not working :(

Upvotes: 3

Views: 1033

Answers (1)

SMAKSS
SMAKSS

Reputation: 10520

As @CBroe said earlier width 1s is not a valid input for transition-delay. So in order to make it work, you should add your transition delay within your elements inline or separately by a single value (ms or s), just like this:

Inline:

&--1 {
    background: red;
    width: 1rem;
    z-index: 15;
    bottom: 100%;
    transition: bottom .3s 1s, width 1s 1s; /* name | duration | delay */
}

Separately:

&--1 {
    background: red;
    width: 1rem;
    z-index: 15;
    bottom: 100%;
    transition: bottom .3s, width 1s;
    transition-delay: 1s, 1s; 
}

NOTE: For more information about it, you can read transition-delay or transition itself.

Upvotes: 1

Related Questions