Как сделать плавный transition?

Question

[Nikita_02]

Друзья, добрый день!
Прошу вашей помощи, заранее огромное спасибо откликнувшимся! Суть вопроса такова;
При клике на иконку мобильного меню (бургер) .main-menu-btn для данного div'а добавляется класс .active, и выезжает мобильное меню .main-menu с классом .is-visible Выезжает оно с задержкой transition: transform 0.3s linear 0s. При последующем клике классы у .main-menu-btn и .main-menu удаляются, и меню улетает (исчезает), т.е. задержка не срабатывает.

Знаю, что можно реализовать данное через JS:
on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
в чем разница не понимаю, и так и так и эдак не работает, в интернете перерыл кучи кода, сайтов-примеров с демо, под себя адаптировать не могу, т.к. JS не знаю (каюсь), времени изучать нет, делаю сайт для школы...

/** Кнопка меню (бургер) **/
<div class="main-menu-btn visible-xs-inline-block">

/** Мобильное меню **/
<div class="main-menu-wrap">
   <ul class="main-menu">
      <li class="main-menu-item">
            <a href="/programs">Программы</a>
      </li>
      <li class="main-menu-item">
            <a href="/programs">Программы</a>
      </li>
      <li class="main-menu-item">
            <a href="/programs">Программы</a>
      </li>
</ul>
</div>

.responsive .main-menu {
    transition: transform 0.3s linear 0s;
}
.responsive .main-menu.is-visible {
    transform: translate(-100%);
}

$(".main-menu-btn").on("click", function(e) {
		e.preventDefault();
		$(this).toggleClass("active");
		$(".main-menu").toggleClass("is-visible");
		$(".main-menu").on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
	});

Answer 1

[Anton fon Faust]

Приведите весь код, а лучше ссылку на 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")
// но это страх и ужас - нужно выносить из замыкания в отдельные функции
});
  });

Comments

[Nikita_02]

Вот https://jsfiddle.net/36fd6680/11/ =)

[Nikita_02]

при повторном клике окно улетает, хотелось бы добиться плавности "хода". Как это сделать, ума не приложу...

[Anton fon Faust]

Nikita_02: проблема вот здесь (строка 52):
.responsive .main-menu-wrap

высота не назначена. Поставьте сюда height: 100% и будет вам счастье)

[Nikita_02]

Антон, спасибо большое!! Этот фейл я надолго запомню =)
ЗЫ: А что тогда дает это пресловутое значение, если не секрет?
('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend')

[Nikita_02]

Антон, к сожалению, это не совсем то. Если указать height: 100%; то меню действительно плавно выезжает и скрывается, но после того, как меню уезжает, остается как бы перекрытие этим меню всей остальной страницы. Т.е. если не указывать это свойство, то высота динамически меняется, если указать height: 100%, то firebug показывает меню на высоту всей страницы. Тем самым страница становится не кликабельна. Обидно. Разгадка была близка. )) Буду искать дальше варианты. В любом случае, спасибо за участие ;)

[Anton fon Faust]

Nikita_02: А зачем тогда это: .responsive .main-menu-wrap.active {
background-color: rgba(34, 34, 34, 0.7);
?
Я так понимаю, как раз для того, чтобы меню перекрывало контент.
Что можно посоветовать... так как я вижу у вас скролл в меню - можно задать фиксированный размер этому блоку и не париться.
Или сделать overflow-x: hidden для body и отказаться от div..main-menu-wrap

Answer 2

[holfza]

.responsive .main-menu {
    transition: transform 0.3s linear 0s;
    transform: translate(0%);
}
.responsive .main-menu.is-visible {
    transform: translate(-100%);
}

Comments

[Nikita_02]

Спасибо, но это слишком очевидно и это не работает)) Как я понял, вся загвоздка в этом пресловутом on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');

Вот тут, например https://codyhouse.co/demo/3d-bold-navigation/index.html применяется такой код;

$('main').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//once the navigation is closed, remove the old section from the DOM
section.prev('.cd-section').remove();
});

В других примерах другой, например on('webkitTransitionEnd...); и off('webkitTransitionEnd...);
Тут именно через JS надо делать.

[holfza]

Nikita_02: Куда-то вы не туда копаете, вот же все работает: https://jsfiddle.net/ygxr3j1p/1/