1

Когда открыто меню и панель с подкатегориями, при закрытии панель с подкатегориями исчезает быстрее.

  1. Как синхронизировать анимацию скрытия панелей моб. меню?
  2. Из за чего они скрываются с разной скоростью если у всех стоит одинаковый duration?
  3. Почему при загрузке страницы происходит анимация?

    $('.trigger-menu').on('click', function() {
      $('body').toggleClass('menu-open');
    });
    $('.bg').on('click', function() {
      $("#mobile-menu-trigger:checked,.menu-inner-trigger:checked").prop("checked", false).change();
      $('body').toggleClass('menu-open');
    });
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.container {
  width: 500px;
  height: auto;
  margin: auto;
  padding: 15px;
  overflow: hidden;
  border: 1px solid lightgrey;
  position: relative;
  height: 300px;
}

.mobile-menu {
  width: 80%;
  max-width: 300px;
  position: fixed;
  top: 0;
  right: auto;
  bottom: 0;
  animation-name: slidemenuback;
  animation-duration: 0.3s;
  animation-timing-function: easy-in-out;
  animation-fill-mode: forwards;
  transform: translateX(-100%);
  left: 0;
  z-index: 5;
  box-shadow: 3px 0 4px lightgrey;
  background: #fff;
}
.mobile-menu__header {
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid #ff4081;
  background: #fff;
}
.mobile-menu__logo-wrapper {
  width: 150px;
  margin: 0 auto;
}

.mobile-menu__list {
  width: 100%;
  height: 100%;
}
.mobile-menu__item {
  border-bottom: 1px solid lightgrey;
}
.mobile-menu__link {
  padding: 5px;
  display: block;
}
.mobile-menu__inner {
  background: #f78a8a;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  bottom: 0;
  transform: translateX(-100%);
  animation-name: slidemenuback;
  animation-duration: 0.3s;
  animation-timing-function: easy-in-out;
  animation-fill-mode: forwards;
}

#mobile-menu-trigger:checked + .mobile-menu {
  animation-name: slidemenu;
  animation-duration: 0.3s;
  animation-timing-function: easy-in-out;
  animation-fill-mode: forwards;
}

input[data-menu="menu"]:checked + .mobile-menu__inner {
  animation-name: slidemenu;
  animation-duration: 0.3s;
  animation-timing-function: easy-in-out;
  animation-fill-mode: forwards;
}

.display-hidden {
  display: none;
}

.trigger-menu {
  background: #91a2f7;
  float: right;
}

.bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1;
  visibility: hidden;
  opacity: 0;
}

.menu-open .bg {
  opacity: 1;
  visibility: visible;
}

.logo {
  width: 100%;
  height: auto;
}

.menu-back-trigger {
  border-bottom: 1px solid #ff4081;
}

@keyframes slidemenu {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slidemenuback {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

    <label class="trigger-menu" for="mobile-menu-trigger">Trigger</label>
    <input id="mobile-menu-trigger" class="display-hidden" type="checkbox">
    <nav class="mobile-menu">
      <header class="mobile-menu__header">
        <div class="mobile-menu__logo-wrapper">

        </div>
      </header>
      <ul class="mobile-menu__list">
        <li class="mobile-menu__item">
          <label class="mobile-menu__link" for="menu-inner-trigger-1">Category</label>
          <input id="menu-inner-trigger-1" class="menu-inner-trigger display-hidden" type="checkbox" data-menu="menu">
          <div class="mobile-menu__inner">
            <label class="mobile-menu__link menu-back-trigger" for="menu-inner-trigger-1">Category</label>
            <ul class="mobile-menu__inner-list">
              <li class="mobile-menu__inner-item">
                <a href="#" class="mobile-menu__link">
                  Inner category
                </a>
              </li>
              <li class="mobile-menu__inner-item">
                <a href="#" class="mobile-menu__link">
                  Inner category2
                </a>
              </li>
              <li class="mobile-menu__inner-item">
                <a href="#" class="mobile-menu__link">
                  Inner category3
                </a>
              </li>
              <li class="mobile-menu__inner-item">
                <a href="#" class="mobile-menu__link">
                  Inner category4
                </a>
              </li>
              <li class="mobile-menu__inner-item">
                <a href="#" class="mobile-menu__link">
                  Inner category5
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li class="mobile-menu__item">
          <label class="mobile-menu__link" for="menu-inner-trigger-2">Category2</label>
          <input id="menu-inner-trigger-2" class="menu-inner-trigger display-hidden" type="checkbox" data-menu="menu">
          <div class="mobile-menu__inner">
            <label class="mobile-menu__link" for="menu-inner-trigger-2">Category2</label>
            <ul class="mobile-menu__inner-list">
              <li class="mobile-menu__inner-item">
                <a href="#" class="mobile-menu__link">
                  Inner category
                </a>
              </li>
              <li class="mobile-menu__inner-item">
                <a href="#" class="mobile-menu__link">
                  Inner category2
                </a>
              </li>
              <li class="mobile-menu__inner-item">
                <a href="#" class="mobile-menu__link">
                  Inner category3
                </a>
              </li>
              <li class="mobile-menu__inner-item">
                <a href="#" class="mobile-menu__link">
                  Inner category4
                </a>
              </li>
              <li class="mobile-menu__inner-item">
                <a href="#" class="mobile-menu__link">
                  Inner category5
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li class="mobile-menu__item">
          <a href="#" class="mobile-menu__link">
            Delivery
          </a>
        </li>
        <li class="mobile-menu__item">
          <a href="#" class="mobile-menu__link">
            About
          </a>
        </li>
      </ul>
    </nav>
    <div class="bg"></div>
  </div>

1
  • Поставь анимациям стиль animation-timing-function: linear. А исчезает по-разному потом, что ширина подменю меньше чем самого меню
    – Yuri
    9 янв 2017 в 22:40

2 ответа 2

1
  1. Конкретно в данном случае тут не нужна анимация, достаточно transition. При помощи JS необходимо выключать только чекбокс #mobile-menu-trigger, а затем отслеживать transtionend для меню и только после этого выключать чекбокс для внутреннего меню, чтобы невидимо скрыть его.

Примечание: поскольку transtionend срабатывает на любые transtion внутри блока, а нам необходимо определить конец анимации только внешнего меню, необходимо сделать проверку на то, какой именно блок закончил анимацию (1).

  1. Рассинхронизация анимаций происходила по причине того, что меню категорий находилось внутри элемента, к которому применяется анимация и, соответственно, ее скорость увеличивалась в два раза. Пояснение: когда запускалась анимация, внешнее меню начинало двигаться влево со скоростью 100пкс / 0.3с; одновременно начинало двигаться влево внутреннее меню с такой же скоростью плюс собственная скорость 100пкс / 0.3с, соответственно, его скорость была (100пкс / 0.3с)*2.

  2. Потому что изначально меню находится в видимой области, а потом уже начинается анимация и уводит меню за пределы видимой области.

$('.trigger-menu').on('click', function() {
  $('body').toggleClass('menu-open');
});

$('.bg').on('click', function() {
  $("#mobile-menu-trigger:checked").prop("checked", false);
  // по клику на .bg выключаем чекбокс, который связан с внешним меню
  
  $('body').toggleClass('menu-open');
});

$('.mobile-menu').on('transitionend', function(e) {
  // вешаем обработчик на событие "transitionend" для внешнего меню
  
  if ( $(e.target).attr('class') === 'mobile-menu' ) { // (1)
    // поскольку событие "transitionend", несмотря на то, что навешено только на внешнее меню, срабатывает также при окончании transition у .mobile-menu__inner, нам надо отделить .mobile-menu.
    // e.target позволяет определить элемент, на котором происходит событие transitionend. Затем мы проверяем есть ли у него класс mobile-menu и, если есть, выключаем чекбокс, который связан с внутренним меню, т. о. скрывая его 
    
    $('input[data-menu="menu"]').prop("checked", false);
  }
});
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.container {
  width: 500px;
  height: auto;
  margin: auto;
  padding: 15px;
  overflow: hidden;
  border: 1px solid lightgrey;
  position: relative;
  height: 300px;
}

.mobile-menu {
  width: 80%;
  max-width: 300px;
  position: fixed;
  top: 0;
  right: auto;
  bottom: 0;
  transform: translateX(-100%);
  transition: .5s;
  left: 0;
  z-index: 5;
  box-shadow: 3px 0 4px lightgrey;
  background: #fff;
}
.mobile-menu__header {
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid #ff4081;
  background: #fff;
}
.mobile-menu__logo-wrapper {
  width: 150px;
  margin: 0 auto;
}

.mobile-menu__list {
  width: 100%;
  height: 100%;
}
.mobile-menu__item {
  border-bottom: 1px solid lightgrey;
}
.mobile-menu__link {
  padding: 5px;
  display: block;
}
.mobile-menu__inner {
  background: #f78a8a;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  transform: translateX(-100%);
  transition: .5s;
}

#mobile-menu-trigger:checked + .mobile-menu,
input[data-menu="menu"]:checked + .mobile-menu__inner {
  transform: translateX(0);
}

.display-hidden {
  display: none;
}

.trigger-menu {
  background: #91a2f7;
  float: right;
}

.bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1;
  visibility: hidden;
  opacity: 0;
}

.menu-open .bg {
  opacity: 1;
  visibility: visible;
}

.logo {
  width: 100%;
  height: auto;
}

.menu-back-trigger {
  border-bottom: 1px solid #ff4081;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

    <label class="trigger-menu" for="mobile-menu-trigger">Trigger</label>
    <input id="mobile-menu-trigger" class="display-hidden" type="checkbox">
    <nav class="mobile-menu">
      <header class="mobile-menu__header">
        <div class="mobile-menu__logo-wrapper">

        </div>
      </header>
      <ul class="mobile-menu__list">
        <li class="mobile-menu__item">
          <label class="mobile-menu__link" for="menu-inner-trigger-1">Category</label>
          <input id="menu-inner-trigger-1" class="menu-inner-trigger display-hidden" type="checkbox" data-menu="menu">
          <div class="mobile-menu__inner">
            <label class="mobile-menu__link menu-back-trigger" for="menu-inner-trigger-1">Category</label>
            <ul class="mobile-menu__inner-list">
              <li class="mobile-menu__inner-item">
                <a href="#" class="mobile-menu__link">
                  Inner category
                </a>
              </li>
              <li class="mobile-menu__inner-item">
                <a href="#" class="mobile-menu__link">
                  Inner category2
                </a>
              </li>
              <li class="mobile-menu__inner-item">
                <a href="#" class="mobile-menu__link">
                  Inner category3
                </a>
              </li>
              <li class="mobile-menu__inner-item">
                <a href="#" class="mobile-menu__link">
                  Inner category4
                </a>
              </li>
              <li class="mobile-menu__inner-item">
                <a href="#" class="mobile-menu__link">
                  Inner category5
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li class="mobile-menu__item">
          <label class="mobile-menu__link" for="menu-inner-trigger-2">Category2</label>
          <input id="menu-inner-trigger-2" class="menu-inner-trigger display-hidden" type="checkbox" data-menu="menu">
          <div class="mobile-menu__inner">
            <label class="mobile-menu__link" for="menu-inner-trigger-2">Category2</label>
            <ul class="mobile-menu__inner-list">
              <li class="mobile-menu__inner-item">
                <a href="#" class="mobile-menu__link">
                  Inner category
                </a>
              </li>
              <li class="mobile-menu__inner-item">
                <a href="#" class="mobile-menu__link">
                  Inner category2
                </a>
              </li>
              <li class="mobile-menu__inner-item">
                <a href="#" class="mobile-menu__link">
                  Inner category3
                </a>
              </li>
              <li class="mobile-menu__inner-item">
                <a href="#" class="mobile-menu__link">
                  Inner category4
                </a>
              </li>
              <li class="mobile-menu__inner-item">
                <a href="#" class="mobile-menu__link">
                  Inner category5
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li class="mobile-menu__item">
          <a href="#" class="mobile-menu__link">
            Delivery
          </a>
        </li>
        <li class="mobile-menu__item">
          <a href="#" class="mobile-menu__link">
            About
          </a>
        </li>
      </ul>
    </nav>
    <div class="bg"></div>
  </div>

2
  • animation использовал потому-что на моб. устройствах transition выполнялся с рывками. Правильно ли я понял, что все ефекты вложеных елемнтов всегда выполняются в 2 раза быстрее? Пожалуйста, обьясните, что происходит в этой части кода if ( $(e.target).attr('class') === 'mobile-menu' ) { // (1) $('input[data-menu="menu"]').prop("checked", false); } Я понимаю, что он выключать чекбокс, но никак не пойму как он обращается к нужному и не могу обьяснить эту часть $(e.target).attr('class') === 'mobile-menu'
    – E_K
    10 янв 2017 в 14:53
  • обновил ответ, добавил комментарии в код и сам текст. 10 янв 2017 в 15:21
1

Пробуем так:

$('#Trigger').click( function(){
	$('.sidebar').toggleClass('active');
})
* {
  box-sizing: border-box;
}

.container {
  position: relative;
  border: 1px solid #f2f2f2;
  width: 400px;
  height: 400px;
  margin: 30px auto;
  overflow: hidden;
}
.container .trigger {
  display: inline-block;
  background: #d5d5d5;
  padding: 10px;
  width: 30px;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
}
.container .trigger:hover {
  opacity: 0.8;
}
.container .sidebar {
  position: absolute;
  width: 100px;
  background: #f2f2f2;
  height: 100%;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: cubic-bezier(0.11, 0.94, 0.32, 0.97) 400ms;
  transition: cubic-bezier(0.11, 0.94, 0.32, 0.97) 400ms;
}
.container .sidebar.active {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.container .sidebar .option_menu {
  border-bottom: 1px solid #d5d5d5;
  margin: 2px 4px;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div id="Trigger" class="trigger">
		!
	</div>
	<div class="sidebar">
		<div class="option_menu">1</div>
		<div class="option_menu">2</div>
		<div class="option_menu">3</div>
		<div class="option_menu">4</div>
		<div class="option_menu">5</div>
	</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.