Приведите весь код, а лучше ссылку на jsfiddle.net
Что вижу в вашем примере: класс responsive не присвоен ни одному из родительских для main-menu элементов.
$(".main-menu").on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
Это что? Какую обработку вы назначаете на эти события?
Если я правильно понял то, что вы хотите сделать, нужно так:
$(".main-menu-btn").on("click", function(e) {
e.preventDefault();
$(this).off('click');
$(this).addClass("active");
$(".main-menu").addClass("is-visible");
$(".main-menu").off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e){
// и вот тут заново делаем обработчик клика для $(".main-menu-btn")
// но это страх и ужас - нужно выносить из замыкания в отдельные функции
});
});
