CSS3 transition with jQuery .addClass and .removeClass

Question

I have a big main navigation panel that I want to animate when it's deploying (expanding).

I'm working with jQuery to trigger the visibility of it by adding/removing the class visible/hidden.

I had to set a delay time to apply the hidden class because the trigger is a button outside of the panel's div. (if I used a rollover on the button, once you rollout the panel will disappear)

The code is this

$(document).ready(function() {
    $('#menu-item-9').click(function(){
        $('#repair-drop').removeClass('hidden');
        $('#repair-drop').addClass('visible');
    });
$('#repair-drop').on('mouseleave', function(e) {
    setTimeout(function() {
        $('#repair-drop').removeClass('visible').addClass('hidden');
    }, 600);        

});
});

My CSS is as follows

.hidden{
    max-height: 0px;
    -webkit-transition: max-height 0.8s;
    -moz-transition: max-height 0.8s;
    transition: max-height 0.8s;

}
.visible{
    max-height: 500px;  
}

The transition effect is not working at all.

Answer 1

You are adding and removing the class that contains the transition CSS. I recommend moving that to its own rule DEMO.

.hidden{
    max-height: 0px;
}
.visible{
    max-height: 500px;  
}

#repair-drop{
    -webkit-transition: max-height 0.8s;
    -moz-transition: max-height 0.8s;
    transition: max-height 0.8s;
}

Answer 2

I am tired of this issue, better use animation:

.container .element.animation  {
    animation: SHW .5s;
    animation-fill-mode: both
}
@keyframes SHW {
    from {
        transform:scale(0.7);
        opacity:0
    }
    to {
        transform: scale(1);
        opacity:1
    }
}

Add only to .element class .animation and its working:

$('.container .element').addClass('animation');

Answer 3

Don't remove the .hidden class; it contains your transition styles. Just add and remove the .visible class.

$(document).ready(function() {
    $('#menu-item-9').on('click', function(e) {
        $('#repair-drop').addClass('visible');
    });

    $('#repair-drop').on('mouseleave', function(e) {
        setTimeout(function() {
            $('#repair-drop').removeClass('visible');
        }, 600);        
    });
});

http://jsfiddle.net/mblase75/LjhNa/

---

That said, you might need to improve your solution to account for users rapidly mousing out of #repair-drop and clicking on #menu-item-9 before it can hide.

$(document).ready(function() {
    $('#menu-item-9').on('click', function(e) {
        $('#repair-drop').data('shown',true).addClass('visible');
    });

    $('#repair-drop').on('mouseleave', function(e) {
        $('#repair-drop').data('shown',false);
        setTimeout(function() {
            if (!$('#repair-drop').data('shown')) {
                $('#repair-drop').removeClass('visible');
            }
        }, 600);        
    });
});

http://jsfiddle.net/mblase75/b8QpB/

Answer 4

Have you considered using jQuery UI's animation features? such as

jQuery('#menu-item-9').hide({duration:200,effect:'blind'});

You could also animate the removal of the class, like

jQuery('#menu-item-9').removeClass('hidden', {duration:200,effect:'blind'});

Answer 5

I found a way to make this work using jquery easing plugin. Thanks to all for your responses

$(document).ready(function() {
    $('#menu-item-9').click(function(){
        $('#repair-drop').removeClass('hide');
        $('#repair-drop').animate({"max-height":"500px", "padding-top":"20px", "opacity":"1"},1500, "easeOutCubic");
    });
$('#repair-drop').on('mouseleave', function(e) {
    setTimeout(function() {
        $('#repair-drop').animate({"max-height":"0px", "overflow":"hidden", "padding":"0px","opacity":"0"},2000, "easeOutCubic");

    }, 600);        

});
});