移动端侧边菜单添加transform后背景透明及动画实现咨询

我为移动端设备实现了菜单图标与侧边菜单，点击菜单图标即可显示侧边菜单。尝试为侧边菜单添加淡入动画时，发现添加transform属性后，侧边菜单背景变为透明；注释该属性后，菜单显示正常但无动画。现咨询：

1. 为何添加transform属性后侧边菜单背景会透明？
2. 如何实现侧边菜单的展开动画？

相关CSS代码如下：

.menu {
   transform: translateX(70%); /* 注释此行后菜单显示正常但无动画 */
   transition: all 0.5s ease-in;

   opacity: 0;
   pointer-events: none;
   visibility: hidden;
   display: none;
   width: 0;
   height: 0;
}
.menu-active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0); /* 注释此行 */
    display: block;
    width: 100%;
    height: 100%;
    z-index: 9999999;
}

问题1：添加transform后背景透明的原因 #

核心问题是你同时混用了display: none/block和过渡属性。display是无法参与CSS过渡动画的，当触发.menu-active类时，浏览器会立刻把元素从display: none改成display: block，但此时transform、opacity的过渡还在进行，再加上width/height从0到100%的瞬间变化，多种属性的渲染冲突导致背景层来不及正常绘制，看起来就像是透明了。

另外，transform会创建新的堆叠上下文，但这里更关键的是display: none直接销毁了元素的渲染状态，过渡动画无法基于这个状态正常触发，元素瞬间渲染后和transform的过渡效果叠加，进一步加剧了渲染异常。

问题2：实现侧边菜单展开动画的正确方式 #

要解决这个问题，需要放弃用display: none/block控制显示隐藏，改用visibility、opacity配合transform来实现，同时避免用width/height从0到100%的过渡（这种过渡性能差且容易出问题）。

修改后的CSS示例：

/* 初始状态：菜单在视口右侧外，透明，不可交互 */
.menu {
   position: fixed;
   top: 0;
   right: 0;
   width: 100%;
   height: 100%;
   background: #你的菜单背景色; /* 必须明确设置背景色 */
   transform: translateX(100%);
   opacity: 0;
   pointer-events: none;
   visibility: hidden;
   transition: transform 0.5s ease-in, opacity 0.5s ease-in;
   z-index: 9999999;
}

/* 激活状态：滑入视口，恢复交互 */
.menu-active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

关键注意点：

• 删掉display: none/block，用visibility配合pointer-events: none来控制元素是否可交互
• 初始时用transform: translateX(100%)把菜单移出视口，替代width:0/height:0的方式
• 一定要明确设置菜单的背景色，避免渲染时出现透明问题
• 过渡属性指定为transform和opacity，比用all更高效，也能减少不必要的属性过渡

内容的提问来源于stack exchange，提问作者sinan