CSS Transitions with jquery not working

Wednesday, 28 September 2016

Answer

I have a jquery function that adds a class to a div, to hide it

jQuery(document).ready(function() {

    jQuery('.control').click(function() {
        jQuery('.mob-nav').toggleClass('hide');
    });
});

This works fine, but now I want to add a transition to this, using CSS. So, I used

.hide { 
    -webkit-transition: all 2s cubic-bezier(0.04, 0.87, 0, 0.96);

    display: none;     
}

But it just won't work. I tried adding the transition to the div from the beginning. Also tried it on the whole body, it doesn't do anything.