Преобразование переходов не работает при сочетании с изменениями ширины - PullRequest
Новая
       39

Преобразование переходов не работает при сочетании с изменениями ширины

0 голосов
/ 27 ноября 2018

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

Структура HTML следующая: 

<div class="slideOpenMainMenu">
    <div class="sideMenuGeneral">
        ...Top-level menu...
    </div>
    <div class="sideMenuPanelMainChildren">
       ...Expanded submenu...
    </div>
</div>

Добавляя и удаляя классы, я показываю соответствующий div, скрывая другой из вида.Как вы заметите, я стараюсь не использовать ничего, как display:none;, с тех пор я не смогу анимировать контейнеры.Вместо этого я использую сочетание свойств ширины, высоты, видимости и гибкости, чтобы скрыть и показать контейнеры.

/* Menu parent container */
.slideOpenMainMenu {
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(90deg, #12416e 0%, #0d3050 100%);
  display: flex;
  justify-content: center;
}

/* Top-level menu - Initial state */

.sideMenuGeneral {
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-flow: column;
  padding: 20px 16px 0 16px;
  box-sizing: border-box;
  overflow: hidden;
}

/* item submenu - Initial state */

.sideMenuPanelMainChildren {
  width: 0;
  height: 0;
  flex: 0 1 0;
  max-height: 100vh;
  overflow: hidden;
  visibility: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Top-level menu - Expanded state */

.slideOpenMainMenu.item-expanded .sideMenuGeneral {
  width: 0%;
  padding: 0 !important;
  visibility: hidden;
}

.slideOpenMainMenu.item-expanded .sideMenuPanelMainChildren {
  flex: 1 1 auto;
  flex-flow: column;
  width: 100%;
  height: auto;
  overflow: scroll;
  visibility: visible;
}

Для анимации я использую свойства transform:translateY и opacity, чтобы создать нужный эффект скольжения. 

/* Initial state */
.slideOpenMainMenu .sideMenuPanelMainChildren {
    opacity: 0;
    transform: translateX(30%);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s ease;
}

.slideOpenMainMenu .sideMenuGeneral {
    opacity: 1;
    transform: translateX(0%);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s ease;
}

/* Expanded state */

.slideOpenMainMenu.item-expanded .sideMenuPanelMainChildren {
    opacity: 1;
    transform: translateX(0%);
}

.slideOpenMainMenu.item-expanded .sideMenuGeneral {
    opacity: 0;
    height: 0px;
    transform: translateX(-50%);
}

Как вы можете видеть на эту скрипку, анимация хорошо работает в Chrome и Firefox.Не очень хорошо на Webkit и Edge.Из того, что я могу сказать, кажется, что есть какое-то противоречие между изменением ширины и переходами, потому что, когда я отключаю изменения ширины, вы можете видеть, как анимация проигрывается.Что может вызвать изменение в поведении между платформами?Есть ли способ правильно упорядочить изменения?

1 Ответ

0 голосов
/ 27 ноября 2018

Поэтому, когда я писал этот вопрос, я пришел к ответу (как это часто бывает).Проблема, кажется, коренится в том, что последовательность изменений свойств CSS различна в разных браузерах.добавив небольшую задержку (0,01 с) к преобразовательному переходу, я заставил его работать, вот так: 

transition: opacity 0.3s ease, transform 0.3s ease 0.01s, visibility 0s ease;

Тем не менее, я нахожу это немного странным и также интересным.Если у кого-то есть информация о том, как все это упорядочено в браузере, было бы очень полезно узнать.

...