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

голоса
0

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

Структура 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. Из того, что я могу сказать, кажется , есть какой - то конфликт между изменением ширины и переходов, потому что когда я вывожу изменения ширины, вы можете увидеть анимацию играть. Что может вызвать изменения в поведении между платформами? Есть ли способ , чтобы правильно последовательности изменений?

Задан 27/11/2018 в 15:07
источник пользователем
На других языках...                            


1 ответов

голоса
0

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

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

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

Ответил 27/11/2018 в 15:07
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more