与宽度变化结合使用时，变换过渡不起作用答案

【问题标题】：Transform transitions not working when combined with width changes与宽度变化结合使用时，变换过渡不起作用
【发布时间】：2019-04-29 08:43:33
【问题描述】：

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

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

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

【问题讨论】：

标签： css flexbox webkit css-animations microsoft-edge

【解决方案1】：

所以在写这个问题时，我得到了答案（因为它经常发生）。问题的根源似乎在于不同浏览器上 CSS 属性更改的顺序不同。通过在转换转换中添加一个微小的延迟（0.01 秒），我让它开始工作，如下所示：

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

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

【讨论】：