它可以通过使用过渡计时函数step-end和step-start来处理

例如：https://jsfiddle.net/y72h8Lky/

$（“.run”）.on（“click”，函数（）{$（“.popup”）.addClass（“show”）；});$（“.popup”）.on（“单击”，函数（）{$（“.popup”）.removeClass（“show”）；}).popup{不透明度：0；显示：块；位置：绝对；顶部：100%；底部：0；左：0；右：0；z指数：1450；背景色：rgba（0，175，236，0.6）；过渡：不透明度0.3s缓和，顶部0.3s台阶结束；}.popup.show{过渡：不透明度0.3s缓和，顶部0.3s步进开始；不透明度：1；顶部：0；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div class=“popup”></div><button class=“run”style=“font-size:24px；”>单击我</button>

在本文发表时，如果您尝试更改显示属性，所有主要浏览器都会禁用CSS转换，但CSS动画仍然可以正常工作，因此我们可以使用它们作为解决方法。

示例代码（您可以相应地将其应用于菜单）演示：

将以下CSS添加到样式表中：

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

然后将fadeIn动画应用于父级悬停时的子级（当然还有设置显示：块）：

.parent:hover .child {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

更新2019-也支持淡出的方法：

（需要一些JavaScript代码）

//我们需要跟踪淡入元素，以便稍后在CSS中应用淡入document.addEventListener（“动画启动”，函数（e）{if（e.animationName==“淡入”）{e.target.classList.add（'did-fade-in'）；}});document.addEventListener（'animonend'，函数（e）{if（e.animationName===“淡出”）{e.target.classList.remove（'did-fade-in'）；}});第二部分{边框：5px实心；填充：10px；}div:悬停{边框颜色：红色；}.父项.子项{显示：无；}.parent:悬停.child{显示：块；动画：淡入1秒；}.parent:not（：hover）.child.id-fade-in{显示：块；动画：淡出1s；}@关键帧淡入{来自{不透明度：0；}至{不透明度：1；}}@关键帧淡出{来自{不透明度：1；}至{不透明度：0；}}<div class=“parent”>父母亲<div class=“child”>小孩</div></div>

如果您使用jQuery设置类，这将100%有效：

$（文档）.ready（函数）{$（'按钮'）.click（函数）{var container=$（'.container'）；if（！container.hasClass（'active'））{container.addClass（“显示”）.outerWidth（）；container.addClass（'active'）；}其他{container.removeClass（'active'）.one（'transitioned'，function（）{container.removeClass（“显示”）；});}});});.容器{显示：无；不透明度：0；过渡：不透明度0.3s缓解；}.container.show{显示：柔性；}.容器激活{不透明度：1；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><button type=“button”>切换</button><div class=“container”>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯，quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外，你还得承担责任，这是因为你在实验室里表现得很糟糕。</div>

当然，您可以只使用jQuery.fadeIn（）和.fadeOut（）函数，但设置类的好处是，如果您想转换为块以外的显示值（默认情况下使用.fadeIn）和.fadaOut（））。

在这里，我正在过渡到具有良好渐变效果的显示弹性。

此解决方案具有极好的兼容性，我还没有见过它：

.hidden-element {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity .5s ease-out;
}

.hidden-element.visible {
  position: static;
  z-index: auto;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

说明：它使用了可见性：隐藏技巧（与“显示和动画”在一个步骤中兼容），但它使用了组合位置：绝对；z指数：-1；指针事件：无；以确保隐藏的容器不占用空间并且不响应用户交互。

不使用显示，您可以将元素存储在“屏幕外”，直到您需要它，然后将其位置设置为您想要的位置，同时对其进行转换。然而，这带来了一系列其他设计问题，因此您的里程可能会有所不同。

无论如何，您可能不想使用显示，因为您希望屏幕阅读器可以访问内容，而屏幕阅读器在很大程度上试图遵守可见性规则-即，如果它不应该被眼睛看到，它就不会作为内容显示给代理。

我怀疑任何刚开始CSS转换的人都会很快发现，如果你同时修改显示属性（block/none），它们就不起作用了。一个尚未提及的解决方法是，您可以继续使用display:block/none来隐藏/显示元素，但将其不透明度设置为0，这样即使在显示为display:block时，它仍然是不可见的。

然后添加另一个CSS类，例如“on”，将不透明度设置为1，并定义不透明度的转换。正如您可能想象的那样，您必须使用JavaScript将“on”类添加到元素中，但至少您仍在使用CSS进行实际转换。

P.S.如果您发现自己需要同时执行display:block和添加class“on”，请使用setTimeout延迟后者。否则，浏览器只会同时看到这两种情况，并禁用转换。