CSS transition如何实现ease-out带延迟但ease-in无延迟效果

你的代码有两处问题，导致效果不符合预期：

• 语法错误：第二条过渡规则的时长值0.4缺失时间单位s，浏览器无法解析该条规则会直接忽略
• 逻辑错误：CSS不会自动区分「hover入场」「hover离场」两个场景，去匹配同个选择器下写的多条同属性过渡规则。把两组配置都写在元素默认样式上时，浏览器只会按CSS解析优先级生效单条规则，根本实现不了分场景的参数差异。

CSS过渡执行时，会读取过渡最终状态对应选择器上的transition配置，利用这个规则把两组过渡分别写在对应状态下即可：

• 离场过渡（鼠标移出，从hover态回到默认态）：配置写在元素的默认样式中
• 入场过渡（鼠标移入，从默认态切到hover态）：配置写在:hover状态的样式中

参考代码：

/* 下拉菜单默认收起态，配置离场过渡 */
.dropdown-menu {
  height: 0;
  overflow: hidden; /* 高度过渡必须加这个属性，否则动画过程中内容会提前溢出 */
  -webkit-transition: height 0.4s ease-out 1s;
  transition: height 0.4s ease-out 1s;
}

/* 鼠标hover触发菜单展开，配置入场过渡 */
.menu-container:hover .dropdown-menu {
  height: 200px; /* 替换为你菜单实际展开的固定高度值 */
  -webkit-transition: height 0.4s ease-in 0s;
  transition: height 0.4s ease-in 0s;
}

如果你的下拉菜单高度是随内容动态变化的，没法提前写死固定height值，不要直接用height做过渡——height: auto无法触发CSS过渡，可以换成max-height方案：

• 收起态设置max-height: 0
• 展开态设置max-height: 300px（该值需要大于菜单的最大可能高度，按需调整）
• 把过渡属性从height替换为max-height，其余参数配置逻辑完全一致。

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