web-dev-qa-db-fra.com

Transition CSS3 avec jQuery .addClass et .removeClass

J'ai un grand panneau de navigation principal que je souhaite animer lors de son déploiement (extension).

Je travaille avec jQuery pour déclencher sa visibilité en ajoutant/supprimant la classe visible/cachée.

J'ai dû définir un délai pour appliquer la classe masquée, car le déclencheur est un bouton situé en dehors du div du panneau. (Si j'ai utilisé un survol sur le bouton, une fois que vous avez déroulé le panneau, celui-ci disparaîtra)

Le code est ceci

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

jqueryhtmlcss3
17
Jaypee

Vous ajoutez et supprimez la classe qui contient la CSS de transition. Je recommande de déplacer cela à sa propre règle 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;
}
14
Fresheyeball

Je suis fatigué de ce problème, mieux utiliser 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 uniquement à la classe .element .animation et son fonctionnement:

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

Ne supprimez pas la classe .hidden; il contient vos styles transition. Ajoutez et supprimez simplement la classe .visible.

$(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 devrez peut-être améliorer votre solution pour que les utilisateurs puissent rapidement passer de #repair-drop à la souris et cliquer sur #menu-item-9 avant de pouvoir la masquer.

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

5
Blazemonger

Avez-vous envisagé d'utiliser les fonctionnalités d'animation de jQuery UI? tel que

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'});
1
jbwebtech

J'ai trouvé un moyen de faire en sorte que cela fonctionne avec le plugin JQery Easing. 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);        

});
});
0
Jaypee