css - 与宽度变化相结合时，变换过渡不起作用

Question

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

HTML 的结构如下:

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

通过添加和删除类，我显示了适当的 div，同时从 View 中隐藏了另一个。您会注意到，我竭尽全力不使用 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;

不过，我觉得这有点奇怪但也很有趣。如果有人知道这些东西在浏览器中是如何排序的，那将是非常值得学习的信息。