Переход CSS3 с jQuery.addClass и .removeClass

У меня есть большая основная панель навигации, которую я хочу оживить, когда она развертывается (расширяется).

Я работаю с jQuery, чтобы вызвать видимость этого, добавляя/удаляя класс видимым/скрытым.

Мне пришлось установить время задержки для применения скрытого класса, потому что триггер - это кнопка за пределами панели div. (если я использовал опрокидывание кнопки, как только вы развернете панель, она исчезнет)

Код - это

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

});
});

Мой CSS выглядит следующим образом

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

Эффект перехода вообще не работает.

Ответы

Ответ 1

Вы добавляете и удаляете класс, содержащий CSS перехода. Я рекомендую переместить это в свое собственное правило 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;
}

Ответ 2

Я устал от этой проблемы, лучше использую анимацию:

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

Добавьте только к классу .element класса. и его работе:

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

Ответ 3

Не удаляйте класс .hidden; он содержит стили transition. Просто добавьте и удалите класс .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/

Тем не менее, вам может потребоваться улучшить ваше решение для учетной записи для пользователей, быстро вытеснивших #repair-drop и нажав #menu-item-9, прежде чем он сможет скрыть.

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

Рассматривали ли вы использование функций анимации JQuery UI? таких как

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

Вы также можете анимировать удаление класса, например

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

Ответ 5

Я нашел способ сделать эту работу, используя плагин jquery easing. Спасибо всем за ваши ответы

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

});
});