Transition CSS3 avec jQuery .addClass et .removeClass

J'ai un gros principal panneau de navigation que je veux animer lorsque c'est le déploiement (en expansion).

Je travaille avec jQuery pour déclencher la visibilité de celle-ci par l'ajout/retrait de la classe, le visible et le caché.

J'ai dû mettre un temps de retard à appliquer la classe caché parce que la gâchette est un bouton à l'extérieur de la div. (si j'ai utilisé un rollover sur le bouton, une fois que vous déploiement le panneau disparaît)

Le code est ce

$(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);        

});
});

Mon CSS est comme suit

.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;  
}

L'effet de transition ne fonctionne pas du tout.

source d'informationauteur Jaypee

  1. 13

    Vous sont l'ajout et la suppression de la classe qui contient la transition CSS. Je recommande à se déplacer qu'à sa propre règle DÉMO.

    .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;
}
  2. 13

    Je suis fatigué de cette question, une meilleure utilisation de l'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
    }
}

    Ajouter seulement .élément de la classe .l'animation et son travail:

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

    Ne retirez pas la .hidden classe; il contient votre transition les styles. Juste d'ajouter et de supprimer la .visible classe.

    $(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/

    Cela dit, vous pourriez avoir besoin pour améliorer votre solution de compte pour les utilisateurs rapidement le pointeur de la souris hors de #repair-drop et en cliquant sur #menu-item-9 avant il peut se cacher.

    $(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/

  4. 1

    Avez-vous considéré l'utilisation de jQuery UI fonctions d'animation? comme

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

    Vous pouvez également animer la suppression de la classe, comme

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

    J'ai trouvé un moyen de faire fonctionner à l'aide de jquery easing plugin.
    Merci à tous pour vos réponses

    $(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);        

});
});