CSS Keyframe animation not removing display block

Question

I have a search bar hidden by default, when you click the button it will hide or remove it depending on the state. I thought it worked great as it appeared and disappeared perfectly until i realized that i could not click on a specific element since the search div was hidden but actually the display was block. I need it to go to display none.

Html:

<div id="searchsection" class="btnlist btnlist-top blank" style="display:none">
</div>

<button id="pl-manage-search" style="background-color:#2f383f;font-size: 38px;" class="btn btn-default" type="button" title="Toggle Search" onclick="openSearch()"><i class="fa fa-search"></i></button>

Css:

@keyframes fadinsearch {
    0% {
        display: none;
        opacity: 0;
    }
    1% {
        display: block;
    }
    100% {
        display: block;
        opacity: 1;
    }
}

.fadinsearch {
    animation: fadinsearch 500ms linear;
    animation-fill-mode: forwards;
}

@keyframes fadoutsearch {
    0% {
        display: block;
        opacity: 1;
    }
    99% {
        display: block;
    }
    100% {
        display: none;
        opacity: 0;
    }
}

.fadoutsearch {
    animation: fadoutsearch 500ms linear;
    animation-fill-mode: forwards;
}

JS:

var opens = false;
function openSearch()
{
    if (opens == false)
    {
        $("div[id='searchsection']").each( function()
        {
            //$(this).toggleClass('blank fadinsearch');
            $(this).removeClass( "blank" ).addClass( "fadinsearch" );
            $(this).removeClass( "fadoutsearch" ).addClass( "fadinsearch" );
        });
        document.getElementById("searchsection").style.display = "block";
        document.getElementById("playlist-entries").style.paddingTop = "79px";
        opens = true;
    }
    else
    {
        $("div[id='searchsection']").each( function()
        {
            $(this).removeClass( "fadinsearch" ).addClass( "fadoutsearch" );
        });
        document.getElementById("playlist-entries").style.paddingTop = "1px";
        //document.getElementById("searchsection").style.display = "none";
        opens = false;
    }
}

Possible duplicate of Can I apply a CSS transition to the overflow property? — TylerH
– TylerH, Commented Oct 20, 2016 at 13:57

Peter B · Accepted Answer · 2016-10-20 14:47:45Z

1

You should not try animate between non numerical values.

Instead you can use opacity and z-index or left: -100%; or things like that because you can't change display to none with keyframes.

You can read more about it here: Transitions and Animations in CSS- book

edited Oct 20, 2016 at 14:47

Peter B

24.7k5 gold badges42 silver badges94 bronze badges

answered Oct 20, 2016 at 13:47

Roberto Regueiro Santiago

1162 bronze badges

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

Collectives™ on Stack Overflow

CSS Keyframe animation not removing display block

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related