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

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

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

吉列尔莫的回答被接受后，CSS2012-04-03的转换规范改变了可见性转换的行为，现在可以在不使用转换延迟的情况下以更短的方式解决此问题：

.myclass > div {
                   transition:visibility 1s, opacity 1s;
                   visibility:hidden;  opacity:0
               }
.myclass:hover > div
               {   visibility:visible; opacity:1 }

为两个转换指定的运行时间通常应为相同的（尽管稍微长一点的可见性时间不是问题）。

有关运行版本，请参阅我的博客文章CSS Transition Visibility。

W.r.t.问题的标题“显示器上的转换：财产”，并回应Rui Marques和josh对公认答案的评论：

如果显示器或使用visibility属性（这可能是本问题中的情况）。

它不会完全删除显示的元素：无，只是使其不可见，但它仍保留在文档流中，并影响以下元素的位置。

完全删除与显示类似的元素的转换：不能使用高度（如其他答案和注释所示）、最大高度或边距顶部/底部进行转换，但也可以参见如何转换高度：0；至高度：自动；使用CSS？以及我的博客文章《显示器和高度财产上的CSS转换解决方案》。

针对GeorgeMillo的评论：需要财产和两个变换：不透明度属性用于创建淡入淡出动画和可见性属性，以避免元素仍在鼠标上反应事件。需要在不透明度上进行过渡以获得视觉效果可见性以延迟隐藏，直到淡出完成。

将溢出：隐藏更改为溢出：可见。它工作得更好。我这样使用：

#menu ul li ul {
    background-color:#fe1c1c;
    width:85px;
    height:0px;
    opacity:0;
    box-shadow:1px 3px 10px #000000;
    border-radius:3px;
    z-index:1;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.6s ease;
}

#menu ul li:hover ul  {
    overflow:visible;
    opacity:1;
    height:140px;
}

可见更好，因为溢出：隐藏的行为与显示：无完全相同。

你可以让它以你所期望的自然方式工作-使用显示-但你必须限制浏览器才能让它工作，要么使用Javascript，要么像其他人建议的那样，使用一个标签放在另一个标签内的花式技巧。我不关心内部标记，因为它会使CSS和维度更加复杂，所以这里是Javascript解决方案：

https://jsfiddle.net/b9chris/hweyecu4/17/

以如下框开头：

<div id="box" class="hidden">Lorem</div>

一个隐藏的盒子。

div.hidden {
    display: none;
}
#box {
    transition: opacity 1s;
}
    

我们将使用相关问答中的技巧，检查offsetHeight以立即限制浏览器：

https://stackoverflow.com/a/16575811/176877

首先，库将上述技巧正规化：

$.fn.noTrnsn = function () {
    return this.each(function (i, tag) {
        tag.style.transition = 'none';
    });
};
$.fn.resumeTrnsn = function () {
    return this.each(function (i, tag) {
        tag.offsetHeight;    
        tag.style.transition = null;
    });
};

接下来，我们将使用它来显示一个框，并将其淡入：

$('#button').on('click', function() {
    var tag = $('#box');
    if (tag.hasClass('hidden'))
        tag.noTrnsn().removeClass('hidden')
        .css({ opacity: 0 })
        .resumeTrnsn().css({ opacity: 1 });
    else
        tag.css({ opacity: 0 });
});

这会使盒子变暗。因此，.noTrnsn（）关闭了转换，然后我们删除了隐藏类，该类将显示从“无”转换为默认的“块”。然后，我们将不透明度设置为0，为淡入做好准备。现在，我们已经设置了阶段，我们使用.resumeTrnsn（）重新打开过渡。最后，通过将不透明度设为1开始过渡。

如果没有该库，对显示的更改和对不透明度的更改都会导致不理想的结果。如果我们简单地删除了库调用，我们根本不会得到转换。

请注意，上述操作不会在渐变动画结束时再次将显示设置为无。不过我们可以变得更漂亮。让我们用一个从0开始逐渐变高的渐变。

想要

https://jsfiddle.net/b9chris/hweyecu4/22/

#box {
    transition: height 1s, opacity 1s;
}

我们现在正在转换高度和不透明度。注意，我们没有设置高度，这意味着它是默认值，自动。传统上，这是无法转换的——从自动转换为像素值（如0）不会导致转换。我们将使用库和另一个库方法来解决这个问题：

$.fn.wait = function (time, fn) {
    if (time)
        this.delay(time);
    if (!fn)
        return this;

    var _this = this;
    return this.queue(function (n) {
        fn.call(_this);
        n();
    });
};

这是一种方便的方法，可以让我们参与jQuery现有的fx/animation队列，而不需要jQuery3.x中现在排除的任何动画框架。

让我们设置向下滑动效果的动画。

$('#button').on('click', function() {
    var tag = $('#box');
    if (tag.hasClass('hidden')) {
        // Open it
        // Measure it
        tag.stop().noTrnsn().removeClass('hidden').css({
            opacity: 0, height: 'auto'
        });
        var h = tag.height();
        tag.css({ height: 0 }).resumeTrnsn()
        // Animate it
        .css({ opacity: 1, height: h })
        .wait(1000, function() {
            tag.css({ height: 'auto' });
        });
    } else {
        // Close it
        // Measure it
        var h = tag.noTrnsn().height();
        tag.stop().css({ height: h })
        .resumeTrnsn()
        // Animate it
        .css({ opacity: 0, height: 0 })
        .wait(1000, function() {
            tag.addClass('hidden');
        });
    }
});

这段代码首先检查#box以及它当前是否隐藏，然后检查它的类。但是，它使用wait（）库调用实现了更多的功能，在滑动/淡出动画的末尾添加隐藏类，如果它实际上是隐藏的，您可以找到隐藏类-这是上面的简单示例无法做到的。这也会启用反复显示/隐藏元素，这在前面的示例中是一个错误，因为隐藏类从未恢复。

您还可以看到在.noTrnsn（）之后调用CSS和类更改，以通常设置动画的阶段，包括进行测量，例如在调用.resumeTrnsn（）之前测量#box的最终高度，而不向用户显示，并将其从完全设置的阶段动画化为其目标CSS值。

旧答案

https://jsfiddle.net/b9chris/hweyecu4/1/

您可以通过以下方式在单击时进行转换：

function toggleTransition() {
  var el = $("div.box1");

  if (el.length) {
    el[0].className = "box";
    el.stop().css({maxWidth: 10000}).animate({maxWidth: 10001}, 2000, function() {
        el[0].className = "box hidden";
    });
  } else {
    el = $("div.box");
    el[0].className = "box";
    el.stop().css({maxWidth: 10001}).animate({maxWidth: 10000}, 50, function() {
        el[0].className = "box box1";
    });
  }

  return el;
}

someTag.click(toggleTransition);

CSS就是你猜到的：

.hidden {
    display: none;
}
.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 20px;
    top: 20px;
    position: absolute;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: scale(.2);
    transform: scale(.2);
    -webkit-transition: transform 2s;
    transition: transform 2s;
}
.box1{
    -webkit-transform: scale(1);
    transform: scale(1);
}

关键是限制显示属性。通过删除隐藏的类，然后等待50毫秒，然后通过添加的类开始转换，我们可以让它出现，然后像我们想要的那样展开，而不是只在屏幕上闪烁而没有任何动画。类似的情况会以相反的方式发生，只是我们要等到动画结束后再应用隐藏。

注意：我在这里滥用.animate（maxWidth）来避免setTimeout竞争条件。setTimeout很快就会在你或其他人不知道的情况下拾取代码时引入隐藏的错误。animate（）可以很容易地用.stop（）杀死。我只是用它在标准fx队列上设置50毫秒或2000毫秒的延迟，在这里，其他基于此构建的程序员很容易发现/解决。

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

结果表明，可见性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>

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

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