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

尝试下面的代码片段...

$(document).ready(function() {
  // Assign transition event
  $("table").on("animationend webkitAnimationEnd", ".visibility_switch_off", function(event) {
    // We check if this is the same animation we want
    if (event.originalEvent.animationName == "col_hide_anim") {
      // After the animation we assign this new class that basically hides the elements.
      $(this).addClass("animation-helper-display-none");
    }

  });

  $("button").click(function(event) {

    $("table tr .hide-col").toggleClass(function() {
      // We switch the animation class in a toggle fashion...
      // and we know in that after the animation end, there
      // is will the animation-helper-display-none extra
      // class, that we nee to remove, when we want to
      // show the elements again, depending on the toggle
      // state, so we create a relation between them.
      if ($(this).is(".animation-helper-display-none")) {
        // I'm toggling and there is already the above class, then
        // what we want it to show the elements , so we remove
        // both classes...
        return "visibility_switch_off animation-helper-display-none";
      }
      else {
        // Here we just want to hide the elements, so we just
        // add the animation class, the other will be added
        // later be the animationend event...
        return "visibility_switch_off";
      }
    });
  });
});

table th {
  background-color: grey;
}

table td {
  background-color: white;
  padding: 5px;
}

.animation-helper-display-none {
  display: none;
}

table tr .visibility_switch_off {
  animation-fill-mode: forwards;
  animation-name: col_hide_anim;
  animation-duration: 1s;
}

@-webkit-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-moz-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-o-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes col_hide_anim {
  0%   {opacity: 1;}
  100% {opacity: 0;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <theader>
    <tr>
      <th>Name</th>
      <th class='hide-col'>Age</th>
      <th>Country</th>
    </tr>
  </theader>
  <tbody>
    <tr>
      <td>Name</td>
      <td class='hide-col'>Age</td>
      <td>Country</td>
    </tr>
  </tbody>
</table>

<button>Switch - Hide Age column with fadeout animation and display none after</button>

这种方案兼容性非常好，目前我还没见过：

.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;
}

解释 ：它使用 visibility: hidden 技巧（与“显示和动画”兼容），但它使用组合 position: absolute; z-index: -1; pointer-events: none; 来确保隐藏容器 不占用空间 ， 也不响应用户交互 .

我认为 SalmanPK 的答案最接近。它确实会淡入或淡出项目，并带有以下 CSS 动画。但是，显示属性不会平滑地进行动画处理，只有不透明度才会。

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

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

如果您想让元素从显示块移动到不显示块，我认为目前仅使用 CSS 无法实现。您必须获取高度并使用 CSS 动画来降低高度。如下面的示例所示，这可以通过 CSS 实现，但要知道元素动画所需的确切高度值会很棘手。

jsFiddle 示例

CSS

@-webkit-keyframes pushDown {
  0% {
    height: 10em;
  }
  25% {
    height: 7.5em;
  }
  50% {
    height: 5em;
  }
  75% {
    height: 2.5em;
  }
  100% {
    height: 0em;
  }
}

.push-down {
    -webkit-animation: pushDown 2s forwards linear;
}

JavaScript

var element = document.getElementById("element");

// Push item down
element.className = element.className + " push-down";

这个问题最简单的通用解决方案是：随意 display:none 在 CSS 中指定，但是您将使用 JavaScript 将其更改为 block 使用 setTimeout() 进行转换 。就这样。

IE：

<style>
    #el {
        display: none;
        opacity: 0;
    }
    #el.auto-fade-in {
        opacity: 1;
        transition: all 1s ease-out; /* Future, future, please come sooner! */
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
    }
</style>

<div id=el>Well, well, well</div>

<script>
    var el = document.getElementById('el');
    el.style.display = 'block';
    setTimeout(function () { el.className = 'auto-fade-in' }, 0);
</script>

这是在最新的 sane 浏览器中测试的。显然它不应该在 Internet Explorer 9 或更早的版本中工作。

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

事实证明， visibility CSS 属性有一个通常用于表格项的值 collapse 。但是，如果用于任何其他元素，它会有效地将它们呈现为 hidden ，这与 非常相似 display: hidden ，但增加了元素不占用任何空间的功能，并且您仍然可以为相关元素设置动画。

下面是一个简单的实际示例。

function toggleVisibility() {
  let exampleElement = document.querySelector('span');
  if (exampleElement.classList.contains('visible')) {
    return;
  }
  exampleElement.innerHTML = 'I will not take up space!';
  exampleElement.classList.toggle('hidden');
  exampleElement.classList.toggle('visible');
  setTimeout(() => {
    exampleElement.classList.toggle('visible');
    exampleElement.classList.toggle('hidden');
  }, 3000);
}

#main {
  display: flex;
  flex-direction: column;
  width: 300px;
  text-align: center;
}

.hidden {
  visibility: collapse;
  opacity: 0;
  transition: visibility 2s, opacity 2s linear;
}

.visible {
  visibility: visible;
  opacity: 1;
  transition: visibility 0.5s, opacity 0.5s linear;
}

<div id="main">
  <button onclick="toggleVisibility()">Click Me!</button>
  <span class="hidden"></span>
  <span>I will get pushed back up...</span>
</div>

您可以让它以您期望的自然方式工作 - 使用 display - 但您必须限制浏览器才能使其工作，使用 Javascript 或其他人建议的将一个标签放在另一个标签内的花哨技巧。我不在乎内部标签，因为它进一步复杂化了 CSS 和尺寸，所以这里是 Javascript 解决方案：

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

从如下框开始：

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

一个隐藏的盒子。

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

我们将使用在相关问答中发现的一个技巧，检查 offsetHeight 来立即限制浏览器：

https://.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() 关闭过渡，然后我们删除 hidden 类， display 从 none 到其默认值 block 。然后我们将不透明度设置为 0 以准备淡入。现在我们已经设置好了舞台，我们使用 重新打开过渡 .resumeTrnsn() 。最后，通过将不透明度设置为 1 来启动过渡。

如果没有这个库，显示和不透明度的改变都会给我们带来不理想的结果。如果我们只是删除库调用，我们根本就不会得到任何过渡。

请注意，上面的代码不会在淡出动画结束时再次将显示设置为无。不过，我们可以做得更漂亮。让我们用一个从 0 开始淡入并增加高度的动画来实现这一点。

想要！

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

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

我们现在正在转换高度和不透明度。请注意，我们没有设置高度，这意味着它是默认值。 auto 按照惯例，这不能转换 - 从自动移动到像素值（如 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/动画队列，而无需 jQuery 3.x 中现在排除的任何动画框架。我不会解释 jQuery 的工作原理，但可以说， .queue() 和 .stop() 管道可以帮助我们防止动画相互干扰。

让我们为向下滑动的效果添加动画。

$('#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() 库调用实现了更多功能，即 hidden 在滑出/淡入淡出动画的末尾添加类，如果它确实处​​于隐藏状态，您会期望找到它 - 而上面的简单示例无法做到这一点。这恰好也启用了反复显示/隐藏元素的功能，这是上一个示例中的一个错误，因为隐藏的类从未恢复。

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

旧答案

https://jsfiddle.net/b9chris/hweeyecu4/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 过渡的人都会很快发现，如果您同时修改显示属性（block/none），它们将不起作用。一种尚未提及的解决方法是，您可以继续使用 display:block/none 来隐藏/显示元素，但将其不透明度设置为 0，这样即使它是 display:block ，它仍然是不可见的。

然后，为了淡入淡出，添加另一个 CSS 类，例如 \'on\'，将不透明度设置为 1，并定义不透明度的过渡。正如您可能想象的那样，您必须使用 JavaScript 将该 \'on\' 类添加到元素，但至少您仍在使用 CSS 进行实际过渡。

PS 如果您发现自己处于需要同时执行这两项操作 display:block 并添加类 \'on\' 的情况，请使用 setTimeout 推迟后者。否则，浏览器只会将两件事视为同时发生并禁用转换。

在 Guillermo 给出了可接受的答案之后，2012-04-03 的 CSStransition 规范改变了可见性转换的行为， 现在可以用一种更短的方式解决这个问题 ，而无需使用 transition-delay：

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

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

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

关于问题标题 “显示屏上的转换：属性”， 以及对 Rui Marques 和 josh 对已接受答案的评论的回应：

此解决方案适用于 使用显示或可见性属性无关的 （就像这个问题中的情况一样）。

它不会完全删除元素 display:none ，只是使其不可见，但它仍然留在文档流中并影响后续元素的位置。

可以使用高度（如其他答案和评论所示）、最大高度或顶部/底部边距来实现 display:none 完全移除元素的过渡 如何使用 CSS 将高度：0；转换为高度：自动； 以及我的博客文章“ 显示和高度属性的 CSS 过渡解决方法” .

回应 GeorgeMillo 的评论：需要两个属性和两个过渡：不透明度属性用于创建淡入淡出动画，可见性属性用于避免元素仍然对鼠标事件做出反应。不透明度需要过渡以实现视觉效果，可见性需要过渡以延迟隐藏，直到淡出完成。

不需要 JavaScript，也不需要过大的最大高度。相反，请 max-height 在文本元素上设置，并使用字体相对单位，例如 rem 或 em 。这样，您可以设置大于容器的最大高度，同时避免菜单关闭时出现延迟或“弹出”：

HTML

<nav>
  <input type="checkbox" />
  <ul>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
  </ul>
</nav>

CSS

nav input + ul li { // Notice I set max-height on li, not ul
   max-height: 0;
}

nav input:checked + ul li {
   max-height: 3rem; // A little bigger to allow for text-wrapping - but not outrageous
}

请在此处查看示例： http://codepen.io/mindfullsilence/pen/DtzjE

我很感谢大家的回答。以下是我用于类似目的的方法：过渡与动画。

例如： 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);
}

我终于找到了一个解决方案，通过结合 opacity （ position absolute 隐藏时不占用空间）。

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

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

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

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

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

改为 overflow:hidden 。 overflow:visible 效果更好。我的用法如下：

#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;
}

visible 更好，因为 overflow:hidden 表现得就像 display:none .

我已经多次遇到过这个问题，现在只需这样做：

.block {
  opacity: 1;
  transition: opacity 250ms ease;
}

.block--invisible {
  pointer-events: none;
  opacity: 0;
}

通过添加类， block--invisible 整个元素将不可点击，但其后面的所有元素都可以点击，因为 pointer-events:none 所有主流浏览器都支持该类（没有 IE <11）。

转换行为：允许离散

现在可以指定 allow-discrete 转换 display 属性，以便它仅在一定时间后“转换”，从而确保其余转换属性生效：

• 当 display 从 none 到 block 在动画持续时间内 0% 翻转到阻止状态，
• 从 display （或另一个可见显示值） block 动画 none ，该值将在动画持续时间内翻转为无 100% ，以便始终可见。

简写用例：

transition: opacity 0.5s, display 0.5s allow-discrete;

完整示例：

label {
  display: flex;
  place-items: center;
  user-select: none;
  cursor: pointer;
}

label:nth-of-type(1):has(:checked) ~ ul > li:nth-of-type(1) {
  opacity: 0;
  padding: 0;
  display: none;
}

label:nth-of-type(2):has(:checked) ~ ul > li:nth-of-type(2) {
  opacity: 0;
  padding: 0;
  display: none;
}

ul {
  list-style: none;
  display: flex;
  place-items: center;
  gap: 1em;
}

li {
  padding: 80px;
  display: block;
  transition: padding 0.3s, opacity 0.3s, display 0.3s;
}

/* rules are to be set as beginning-state for transitioning 
   from "display:none" to a visible display:
   https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
*/
@starting-style {
  li {
    opacity: 0;
    padding: 0;
  }
}

ul > li:nth-of-type(1) {
  transition-behavior: allow-discrete;
}

<label><input type=checkbox> Hide green card (with `allow-discrete`)</label>
<label><input type=checkbox> Hide blue card</label>

<ul>
  <li style='background:PaleGreen'></li>
  <li style='background:CadetBlue'></li>
  <li style='background:RosyBrown'></li>
</ul>

对于上面的例子，我 transition-behavior: allow-discrete; 只设置了第一张卡（数字 1 ）， Hide first card 当选中复选框时，卡不会因为现在已经消失而立即消失 display: none; 在应用它之前 0.25ms “等待”

@starting-style

请注意，上面的代码还使用了 @starting-style 的一部分后将哪些初始样式应用于元素 DOM ，因为 display:none 即使元素出现在标记中，它们也不是 DOM 的一部分。

仅当从 到 任何事物的转换时才需要 @starting-style 使用 display:none ，但如果只需要转换出，则不需要。

进一步阅读：

• https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior#browser_compatibility
• https://developer.chrome.com/blog/entry-exit-animations#transitioning_discrete_animations

它就像下面这样简单:)

@keyframes fadeout {
    0% { opacity: 1; height: auto; }
    90% { opacity: 0; height: auto; }
    100% { opacity: 0; height: 0;
}
animation: fadeout linear 0.5s 1 normal forwards !important;

让它逐渐消失，然后让它 height 0; 。还要确保使用前锋，以便它保持最终状态。

从这些答案中的一些和其他地方的一些建议中可以看出，以下内容对于悬停菜单非常有用（特别是在 Bootstrap 3 中使用它）：

nav .dropdown-menu {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 500ms, opacity 300ms;
    -webkit-transition: max-height 500ms, opacity 300ms;
}
nav .dropdown:hover .dropdown-menu {
    max-height: 500px;
    opacity: 1;
    transition: max-height 0, opacity 300ms;
    -webkit-transition: max-height 0, opacity 300ms;
}

如果您同时指定两个值， height 则还可以使用 max-height 代替， height:auto 不允许与 transition 一起使用。 的悬停值 max-height 需要大于 height 菜单的 。

今天我遇到了这个问题， position: fixed 当时我正在重复使用一个模式。我无法保留它 display: none 然后为其设置动画，因为它只是跳转到外观，并且 z-index （负值等）也会出现奇怪的情况。

我也使用了 height: 0 to height: 100% ，但它只在模态框出现时才起作用。这和你使用 left: -100% 或 一样。

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

首先， 隐藏模态框。注意 height is 0 ，并检查 height transitions 中的声明...它有一个 500ms , which is longer than my opacity transition 。请记住，这会影响淡出过渡：将模态框返回到其默认状态。

#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;
}

第二， 你的可见模态框。假设你正在将 设置 .modal-active 为 body 。现在 height 是 100% ，我的过渡也发生了变化。我希望 height 能够立即改变，并且 opacity 能够 300ms .

.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;
}

就是这样，效果非常好。

我的巧妙的 JavaScript 技巧是 将整个场景分成两个不同的功能 ！

为了做好准备，声明了一个全局变量并定义了一个事件处理程序：

  var tTimeout;
  element.addEventListener("transitionend", afterTransition, true);//firefox
  element.addEventListener("webkitTransitionEnd", afterTransition, true);//chrome

然后，当隐藏元素时，我使用如下方法：

function hide(){
  element.style.opacity = 0;
}

function afterTransition(){
  element.style.display = 'none';
}

为了重新出现该元素，我正在做这样的事情：

function show(){
  element.style.display = 'block';
  tTimeout = setTimeout(timeoutShow, 100);
}

function timeoutShow(){
  element.style.opacity = 1;
}

到目前为止，它有效！