我有一个类似的问题，但我找不到答案。后来几次谷歌搜索把我带到了这里。考虑到我没有找到我所希望的简单答案，我偶然发现了一个既优雅又有效的解决方案。

结果表明，可见性CSS属性具有一个值折叠，通常用于表项。然而，如果在任何其他元素上使用，它会有效地将它们渲染为隐藏的，与显示几乎相同：隐藏，但添加了元素不占用任何空间的功能，您仍然可以为有问题的元素设置动画。

下面是一个简单的例子。

函数toggleVisibility（）{let exampleElement=document.querySelector（'span'）；if（exampleElement.classList.incontains（'visible'））{回来}exampleElement.innerHTML='我不会占用空间！'；exampleElement.classList.tggle（'hidden'）；exampleElement.classList.tggle（'visible'）；setTimeout（（）=>{exampleElement.classList.tggle（'visible'）；exampleElement.classList.tggle（'hidden'）；}, 3000);}#主要的，主要的{显示：柔性；弯曲方向：柱；宽度：300px；文本对齐：居中；}.隐藏{可见性：塌陷；不透明度：0；过渡：可见性2s，不透明度2s线性；}.可见{可见性：可见；不透明度：1；过渡：可见性0.5s，不透明度0.5s线性；}<div id=“main”><button onclick=“toggleVisibility（）”>单击我</按钮><span class=“hidden”></span><span>我会被推回去</span></div>

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

.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；指针事件：无；以确保隐藏的容器不占用空间并且不响应用户交互。

根据W3C工作草案2013年11月19日，显示器不是可设置动画的属性。幸运的是，可见性是可设置动画的。您可以用不透明度的过渡（JSFiddle）链接其过渡：

HTML格式：<a href=“http://example.com“id=”foo“>foo”</a><button id=“hide button”>隐藏</button><button id=“show button”>显示</button>CSS：#食品{过渡特性：可见性，不透明度；转换持续时间：0s，1s；}#foo.hidden餐厅{不透明度：0；可见性：隐藏；过渡特性：不透明度，可见性；转换持续时间：1s，0s；转换延迟：0s，1s；}用于测试的JavaScript：var foo=文档.getElementById（'fo'）；document.getElementById（'hide-button'）.onclick=函数（）{foo.className=“隐藏”；};document.getElementById（'show-button'）.onclick=函数（）{foo.className=“”；};

请注意，如果您只是使链接透明，而不设置可见性：隐藏，那么它将保持可单击状态。

在本文发表时，如果您尝试更改显示属性，所有主要浏览器都会禁用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>

使用CSS动画淡入：

.item {
     display: none;
}

.item:hover {
     display: block;
     animation: fadeIn 0.5s;
}

@keyframes fadeIn {
     from {
          opacity: 0;
     }

     to {
          opacity: 1;
     }
}

我感谢所有的回答。以下是我用于类似目的的内容：过渡与动画。

例子：https://jsfiddle.net/grinevri/tcod87Le/22/

<div class="animation"></div>
<div class="transition"></div>

@keyframes animationTo {
  0% { background-color: rgba(0, 0, 0, 0.1); }
  100% { background-color: rgba(0, 0, 0, 0.5); }
}

@keyframes animationFrom {
  0% { background-color: rgba(0, 0, 0, 0.5); }
  100% { background-color: rgba(0, 0, 0, 0.1); }
}

.animation,
.transition{
  margin: 5px;
  height: 100px;
  width: 100px;
  background-color: rgba(0, 0, 0, 0.1);
}

.animation{
  animation: animationFrom 250ms;
}

.animation:hover{
  background-color: rgba(0, 0, 0, 0.5);
  animation: animationTo 250ms;
}

.transition{
  transition: background-color 250ms;
}

.transition:hover{
  background-color: rgba(0, 0, 0, 0.5);
}