Question

我正在使用此移动菜单，您可以在其中展开和折叠不同的类别。这样做时，应在展开的子菜单（展开时）或顶级菜单（折叠时）上执行滑动动画。

HTML的结构如下：

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

通过添加和删除类，我将显示适当的div，同时将其他隐藏起来。正如您会注意到的那样，我竭尽全力不使用诸如display:none;之类的东西，因为那样我将无法为容器设置动画。相反，我使用宽度，高度，可见性和flex属性的组合来隐藏和显示容器。

/* 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%);
}

正如您在this fiddle上看到的那样，该动画在Chrome和Firefox中效果很好。在Webkit和Edge上效果不佳。据我所知，宽度变化和过渡之间似乎存在某种冲突，因为当我禁用宽度变化时，可以看到动画播放。是什么导致平台之间的行为改变？有没有办法正确排列变更顺序？

Answer 1

因此，在撰写此问题时，我得出了答案（这经常发生）。问题似乎根源在于CSS属性更改的顺序在不同的浏览器上是不同的。通过向转换过渡添加一个微小的延迟（0.01s），我可以使其正常工作，就像这样：

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

还是，我觉得这有点奇怪，也很有趣。如果有人知道如何在浏览器中对这些东西进行排序，那真是太好了。

与宽度更改结合使用时，转换过渡不起作用

1 个答案: