我今天遇到了这个问题，我的立场是：我正在重用的固定模式。我无法保持它的显示：无，然后动画化，因为它只是跳到外观上，而z索引（负值等）也做了奇怪的事情。

我还使用了高度：0到高度：100%，但只有在模态出现时才起作用。这与您使用left时相同：-100%或其他值。

然后我突然想到有一个简单的答案。等等：

首先，你的隐藏模态。请注意高度为0，并查看转换中的高度声明。。。它有一个500毫秒，比我的不透明度转变还要长。记住，这会影响淡出过渡：将模式返回到默认状态。

#modal-overlay {
    background: #999;
    background: rgba(33,33,33,.2);
    display: block;
    overflow: hidden;
    height: 0;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    -webkit-transition: height 0s 500ms, opacity 300ms ease-in-out;
       -moz-transition: height 0s 500ms, opacity 300ms ease-in-out;
            -ms-transition: height 0s 500ms, opacity 300ms ease-in-out;
         -o-transition: height 0s 500ms, opacity 300ms ease-in-out;
        transition: height 0s 500ms, opacity 300ms ease-in-out;
}

第二，你的可见模态。假设你正在为身体设置一个.mode活动。现在身高是100%，我的转变也发生了变化。我希望高度立即改变，不透明度需要300毫秒。

.modal-active #modal-overlay {
    height: 100%;
    opacity: 1;
    z-index: 90000;
    -webkit-transition: height 0s, opacity 300ms ease-in-out;
       -moz-transition: height 0s, opacity 300ms ease-in-out;
        -ms-transition: height 0s, opacity 300ms ease-in-out;
         -o-transition: height 0s, opacity 300ms ease-in-out;
            transition: height 0s, opacity 300ms ease-in-out;
}

就是这样，它就像一个魅力。

我终于为我找到了一个解决方案，将不透明度与绝对位置相结合（隐藏时不占用空间）。

.toggle {
  opacity: 0;
  position: absolute;
  transition: opacity 0.8s;
}

.parent:hover .toggle {
  opacity: 1;
  position: static;
}

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

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

显示不是转换工作的财产之一。

有关可以应用转换的CSS财产的列表，请参阅动画CSS财产。请参阅CSS值和单位模块第4级，组合值：插值、相加和累加，了解如何插值。

9.1中列出了CSS 3。来自CSS的财产（只需关闭警告弹出窗口）

我也尝试过使用高度，但那只是失败得很惨。

上次我不得不这样做时，我使用了max height，这是一个可设置动画的属性（虽然它有点黑客，但确实有效），但要注意，对于复杂的页面或使用低端移动设备的用户来说，它可能非常刺耳。

在这种情况下不使用关键帧应用过渡的另一种方法是将元素的宽度设置为零，然后在悬停时取消设置

.className{
  visibility:hidden;
  opacity: 0;
  transition: .2s;
  width:0;
}

.className:hover{
  visibility:visible;
  margin-right: .5rem;
  opacity: 1;
  width:unset;
}

您可以使用转换事件来实现这一点，因此您为转换构建了两个CSS类，一个保存动画，另一个保存display none状态。你在动画结束后切换它们？在我的例子中，如果我按下一个按钮，我可以再次显示div，并删除这两个类。

尝试下面的代码段。。。

$（文档）.ready（函数）{//分配转换事件$（“table”）.on（“animationend webkitAnimationEnd”，“.visibility_switch_off”，函数（事件）{//我们检查这是否是我们想要的动画如果（event.originalEvent.animationName==“col_hide_anim”）{//在动画之后，我们分配了这个基本上隐藏元素的新类。$（this）.addClass（“动画助手显示无”）；}});$（“按钮”）.click（函数（事件）{$（“table tr.hide col”）.tggleClass（函数）{//我们以切换方式切换动画类。。。//我们知道在动画结束后//动画助手将不显示额外内容//类，当我们需要删除时//根据切换再次显示元素//状态，所以我们在它们之间建立了关系。if（$（this）.is（“.animation helper display none”））{//我正在切换，然后已经有了上面的课程//我们希望它显示元素，因此我们删除//两个类。。。返回“visibility_switch_off动画助手显示无”；}其他{//这里我们只想隐藏元素，所以我们//添加动画类，另一个将被添加//稍后是animationend事件。。。返回“visibility_switch_off”；}});});});表th{背景色：灰色；}表td{背景色：白色；填充：5px；}.animation助手显示无{显示：无；}表tr.visibility_switch_off{动画填充模式：向前；动画名称：col_hide_anim；动画持续时间：1s；}@-webkit关键帧col_hide_anim{0%｛不透明度：1；｝100%｛不透明度：0；｝}@-moz关键帧col_hide_anim{0%｛不透明度：1；｝100%｛不透明度：0；｝}@-o-keyframe col_hide_anim{0%｛不透明度：1；｝100%｛不透明度：0；｝}@关键帧col_hide_anim{0%｛不透明度：1；｝100%｛不透明度：0；｝}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><表><theader><tr><th>名称</th>年龄</th><th>国家</th></tr></theader><tbody><tr><td>姓名</td>年龄</td><td>国家/地区</td></tr></tbody></table>＜button＞切换-使用渐变动画隐藏“年龄”列，并在＜/button＞之后不显示