CSS显示属性上的过渡

我目前正在设计CSS“巨型下拉菜单”-基本上是一个常规的仅CSS下拉菜单，但其中包含不同类型的内容。

目前， 似乎CSS 3过渡不适用于'display'属性 ，即，您不能执行从display: none到display: block （或任何组合）的任何过渡。

当有人将鼠标悬停在顶层菜单项之一上时，是否可以通过上述示例使第二层菜单“淡入”？

我知道您可以在visibility:属性上使用过渡，但是我想不出一种有效使用它的方法。

我也尝试过使用高度，但是那不幸地失败了。

我还知道使用JavaScript实现此功能很简单，但是我想挑战一下自己仅使用CSS，而且我想说的还有点不足。

---

#1楼

我今天遇到了一个position: fixed我正在重用的position: fixed模式。 我无法保持它的display: none显示它，然后对其进行动画处理，因为它刚刚进入外观，并且z-index （负值等）也使事情变得很奇怪。

我还使用了height: 0到height: 100% ，但是它仅在模态出现时才起作用。 这与您使用left: -100%相同left: -100%或其他。

然后令我惊讶的是，有一个简单的答案。 瞧！

首先，您的隐藏模式。 请注意， height为0 ，并检查过渡中的height声明...它有500ms ， 比我的opacity过渡长 。 请记住，这会影响向外的淡出过渡：将模态恢复为其默认状态。

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

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

---

#2楼

我怀疑如果更改display就禁用过渡的原因是由于实际显示。 它不会改变任何东西，可以令人信服地平滑的动态。

display: none; 和visibility: hidden; 是两个完全不同的东西。
两者的作用都是使元素不可见，但具有visibility: hidden;不visibility: hidden; 它仍然呈现的布局，但只是没有那么明显 。
隐藏元素仍然占用空间，并且仍以内联方式或作为块，块内联方式或表或任何display元素指示其呈现方式的内容呈现，并相应地占用空间。
其他元素不会自动移动以占据该空间。 隐藏元素只是不将其实际像素渲染到输出中。

display: none另一方面， display: none实际上不会阻止元素完全呈现。
它不占用任何布局空间。
现在，本来会占用该元素所占用的部分或全部空间的其他元素也会进行调整，以占据该空间，就像该元素根本不存在一样 。

display不仅仅是另一个视觉属性。
它建立元素的整个呈现模式，例如它是block ， inline ， inline-block ， table ， table-row ， table-cell ， list-item还是其他任何东西！
每一个都有不同的布局效果，并且没有合理的方法来动画化或平滑地过渡它们（例如，尝试想象从block到inline的平滑过渡，反之亦然！）。

这就是为什么如果显示发生更改，过渡将被禁用的原因（即使更改是none显示或none更改- none更改都不只是隐身，而是它自己的元素渲染模式，这意味着根本不会渲染！）。

---

#3楼

这个问题最简单的通用解决方案是：随意在CSS中指定display:none ，但是您将使用JavaScript将其更改为block （或其他任何方式），然后还必须向您的元素添加一个类该问题实际上是通过setTimeout（）进行转换的。 就这样。

即：

Well, well, well

已在最新的正常浏览器中进行了测试。 显然，它不应在Internet Explorer 9或更早版本中运行。

---

#4楼

将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 。

---

#5楼

我的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;
}

到目前为止，一切正常！

---

#6楼

您可以简单地使用CSS 可见性 ：隐藏/可见而不是显示 ：none / block

div {
    visibility:hidden;
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0;
}

parent:hover > div {
    opacity: 1;
    visibility: visible;
}

---

#7楼

您还可以使用以下命令：

.dropdown {
    height: 0px;
    width: 0px;
    opacity: .0;
    color: white;
}
.dropdown:hover {
    height: 20px;
    width: 50px;
    opacity: 1;
    transition: opacity 200ms;
    /* Safari */
    -webkit-transition: opacity 200ms;
}

---

#8楼

从这些答案中的一些以及其他建议中，以下内容非常适合悬停菜单（特别是我将其与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 ，因为transition s不允许height:auto 。 max-height的悬停值必须大于菜单的height 。

---

#9楼

根据W3C工作草案2013年11月19日， display内容不是可动画制作的财产 。 幸运的是， visibility是可动画的。 您可以将其过渡与不透明度过渡（ JSFiddle ） 链接在一起 ：

• HTML：

   Foo Hide Show 

• CSS：

   #foo { transition-property: visibility, opacity; transition-duration: 0s, 1s; } #foo.hidden { opacity: 0; visibility: hidden; transition-property: opacity, visibility; transition-duration: 1s, 0s; transition-delay: 0s, 1s; } 

• 用于测试的JavaScript：

   var foo = document.getElementById('foo'); document.getElementById('hide-button').onclick = function () { foo.className = 'hidden'; }; document.getElementById('show-button').onclick = function () { foo.className = ''; }; 

请注意，如果仅使链接透明而不设置visibility: hidden ，则它将保持可单击状态。

---

#10楼

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

的HTML

  
  

    
Link 1
    
Link 1
    
Link 1
    
Link 1
  

的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

---

#11楼

您现在可以将自定义动画添加到block属性。

@keyframes showNav {
  from {opacity: 0;}
  to {opacity: 1;}
}
.subnav-is-opened .main-nav__secondary-nav {
  display: block;
  animation: showNav 250ms ease-in-out both;
}

演示版

在此演示中，子菜单从display:none更改为display:block并且仍然设法淡出。

---

#12楼

在写完Guillermo的可接受答案之后，2012-04-03的CSS过渡规范更改了可见性过渡的行为， 现在可以以更短的方式解决此问题 ，而无需使用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或visible属性是不相关的，则此解决方案适用（如在此问题中可能的情况）。

它不会完全将元素移除为display:none ，只是使其不可见，但仍停留在文档流中并影响以下元素的位置。

完全删除类似于display:none的元素的过渡不能使用高度（如其他答案和注释所示），max-height或margin-top / bottom来完成，另请参见如何过渡height：0; 达到高度：自动； 使用CSS？ 和我的博客文章Display和Height属性上CSS过渡的解决方法 。

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

---

#13楼

我认为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";

---

#14楼

可以使用“屏幕外”元素来存储元素，直到需要时使用它，而不是使用display ，然后将其位置设置为所需的位置并同时进行变换。 但是，这带来了很多其他设计问题，因此您的工作量可能会有所不同。

您可能仍然不想使用display ，因为您希望屏幕阅读器可以访问内容，而屏幕阅读器在大多数情况下都应遵守可见性规则-即，如果眼睛不可见，它不会显示为代理的内容。

---

#15楼

您需要通过其他方式隐藏该元素才能使其正常工作。

我通过绝对定位两个

并将隐藏的一个设置为opacity: 0来实现效果。

如果您甚至将display属性从none切换为block ，则不会在其他元素上进行过渡。

要解决此问题，请始终允许display: block元素display: block ，但通过调整以下任何一种方式隐藏元素：

1. 将height设置为0 。
2. 将opacity设置为0 。
3. 将元素放置在另一个发生overflow: hidden元素的框架之外overflow: hidden 。

可能还有更多解决方案，但是如果将元素切换为display: none ，则无法执行过渡display: none 。 例如，您可以尝试尝试以下操作：

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0;
}
div.active {
    opacity: 1;
    display: block;
}

但是，这是行不通的。 根据我的经验，我发现这无济于事。

因此，您将始终需要保持元素display: block -但您可以通过执行以下操作来解决它：

div {
    transition: opacity 1s ease-out;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}

---

#16楼

编辑：在此示例中，不显示任何内容。

@keyframes hide {
  0% {
    display: block;
    opacity: 1;
  }
  99% {
    display: block;
  }
  100% {
    display: none;
    opacity: 0;
  }
}

上面发生的是，在不透明度逐渐消失的情况下，通过99％的动画显示被设置为阻止。 最后一刻，display属性设置为none。

最重要的一点是使用animation-fill-mode保留动画结束后的最后一帧：

.hide {
   animation: hide 1s linear;
   animation-fill-mode: forwards;
}

这是两个示例： https : //jsfiddle.net/qwnz9tqg/3/

---

#17楼

该解决方案具有出色的兼容性，但我还没有看到它：

.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; position: absolute; z-index: -1; pointer-events: none; 确保隐藏的容器不占用空间并且不响应用户的交互作用 。

---

#18楼

您可以使用显示功能使它正常运行，但是您必须使用Javascript或其他人提出的在另一个标签中包含一个标签的巧妙技巧，以限制浏览器使其正常工作。 我不在乎内部标签，因为它会使CSS和尺寸进一步复杂化，因此这是Javascript解决方案：

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

从类似以下的框开始：

Lorem

一个隐藏的盒子。

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

我们将使用相关q / a中的技巧，检查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()关闭的转换，那么我们删除了hidden类，它翻转display从none到其默认， block 。 然后，我们将不透明度设置为0，以准备淡入。现在，我们已经设置了舞台，我们使用.resumeTrnsn()重新打开过渡。 最后，通过将不透明度设置为1开始过渡。

没有该库，无论是显示更改还是不透明度更改都会给我们带来不良的结果。 如果我们仅删除库调用，则根本没有任何过渡。

请注意，在淡出动画结束时，以上内容不会再次将显示设置为无。 虽然我们可以做得更好。 让我们用一个从0开始逐渐变高的高度来做到这一点。

看中！

https://jsfiddle.net/b9chris/hweyecu4/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的工作原理，但足以说明，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类，您希望该hidden类实际上是否被隐藏了-上面更简单的示例无法做到。 碰巧还可以一遍又一遍地显示/隐藏元素，这在前面的示例中是一个错误，因为从未恢复过隐藏的类。

您还可以看到在.noTrnsn()之后调用CSS和类更改，通常可以设置动画的舞台，包括进行测量，例如在调用.resumeTrnsn()之前，先测量#box的最终高度而不向用户显示该高度， .resumeTrnsn() ，然后将其从完整设置的阶段动画化为目标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 ms， 然后通过添加的类开始过渡，我们使它出现，然后按需要扩展，而不是只是在没有任何动画的情况下跳到屏幕上。 换一种方式发生类似的情况，除了我们等到动画结束之前再应用隐藏。

注意：我在这里滥用.animate(maxWidth)以避免setTimeout竞赛条件。 当您或其他人在不了解它的代码的情况下， setTimeout会迅速引入隐藏的错误。 .animate()可以轻松地由.stop()杀死。 我只是用它在标准fx队列上放置50毫秒或2000毫秒的延迟，在此之上，其他基于此的编码人员可以轻松找到/解决这些延迟。

---

#19楼

您可以使用过渡事件来执行此操作，因此您可以为过渡构建两个CSS类，一个包含动画，另一个保持display no状态。 并且在动画结束后切换它们吗？ 就我而言，如果我按下一个按钮，可以再次显示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;} } 

   
 
 
Name
 
Age
 
Country
 
  
 
 
Name
 
Age
 
Country
 
 
 
 Switch - Hide Age column with fadeout animation and display none after 

---

#20楼

我启动了一个名为Toggle Display Animate的开源框架项目。

该骨架帮助器将使您可以轻松模仿jQuery的显示/隐藏，但具有CSS 3过渡动画。

它使用类切换，因此除了display：none | block | table | inline等之外，您还可以对元素使用任何CSS方法，以及可以想到的其他替代用法。

其主要设计目的是用于元素切换状态，并且它支持还原状态，在该状态下，隐藏对象可让您反向运行关键帧或播放替代动画以隐藏元素。

我正在研究的概念的大多数标记是CSS，实际上很少使用JavaScript。

这里有一个演示： http : //marcnewton.co.uk/projects/toggle-display-animate/

---

#21楼

我已经多次遇到这个问题，现在简单地讲：

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

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

通过添加类block--invisible ，整个元素将无法单击，但是其后面的所有元素将由于所有主要浏览器（没有IE <11）支持的pointer-events:none 。

---

#22楼

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

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

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

---

#23楼

代替使用CSS中不存在的回调，我们可以使用transition-delay属性。

#selector {
    overflow: hidden; // Hide the element content, while height = 0
    height: 0; opacity: 0;
    transition: height 0ms 400ms, opacity 400ms 0ms;
}
#selector.visible {
    height: auto; opacity: 1;
    transition: height 0ms 0ms, opacity 600ms 0ms;
}

那么，这是怎么回事？

1. 添加visible类时， height和opacity开始动画而没有延迟（0毫秒），尽管height需要0毫秒才能完成动画（相当于display: block ），而不opacity需要600毫秒。

2. 删除visible类后， opacity开始动画（延迟为0毫秒，持续时间为400毫秒），高度等待400毫秒，然后立即（0毫秒）恢复初始值（相当于display: none动画回调中display: none值）。

请注意，这种方法比使用visibility方法更好。 在这种情况下，元素仍然占据页面上的空间，并且并不总是适合。

有关更多示例，请参阅本文 。

---

#24楼

如果您使用jQuery设置类，则可以100％使用：

 $(document).ready(function() { $('button').click(function() { var container = $('.container'); if (!container.hasClass('active')) { container.addClass('show').outerWidth(); container.addClass('active'); } else { container.removeClass('active').one('transitionend', function() { container.removeClass('show'); }); } }); }); 

 .container { display: none; opacity: 0; transition: opacity 0.3s ease; } .container.show { display: flex; } .container.active { opacity: 1; } 

  Toggle 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  

当然，您可以只使用jQuery .fadeIn()和.fadeOut()函数，但是设置类的优点是，如果您想转换.fadeIn() block显示值（如.fadeIn()和.fadeOut() ）。

在这里，我转换到显示flex一个漂亮的淡入淡出效果。

---

#25楼

我有一个类似的问题，找不到答案。 后来，一些Google搜索将我引到了这里。 考虑到我没有找到我想要的简单答案，我偶然发现了既优雅又有效的解决方案。

事实证明， visibility CSS属性具有一个值collapse ，通常用于表项。 但是，如果在其他任何元素上使用它，则将它们有效地呈现为hidden ，与display: 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; } 

 
 Click Me!  I will get pushed back up...  

---

#26楼

它很简单，如下所示：）

@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; 。 另外，请确保使用转发，使其保持最终状态。

---

#27楼

您可以连接两个或更多个转换，这时visibility很方便。

 div { border: 1px solid #eee; } div > ul { visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; } div:hover > ul { visibility: visible; opacity: 1; } 

 
 
 
Item 1
 
Item 2
 
Item 3
 
  

（不要忘记transition属性的供应商前缀。）

更多的细节在这篇文章 。

---

#28楼

display不是进行过渡的属性之一。

有关可以应用过渡的CSS属性列表，请参见Animatable CSS属性 。 请参阅CSS值和单位模块级别4，组合值：插值，加法和累加，以了解如何进行插值。

9.1中最多列出了CSS 3 。 CSS中的属性 （仅关闭警告弹出窗口）

我也尝试过使用高度，但是那不幸地失败了。

上次必须执行此操作时，我改用了max-height ，它是一个可设置动画的属性（尽管有点hack，但确实起作用了），但请注意，对于复杂的页面或用户访问量较低的用户而言，它可能非常麻烦端移动设备。

---

#29楼

在撰写本文时，如果您尝试更改display属性，所有主要的浏览器都会禁用CSS转换，但是CSS动画仍然可以正常工作，因此我们可以将其用作解决方法。

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

将以下CSS添加到样式表：

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

然后将fadeIn动画应用于父悬停上的子项（当然设置为display: block ）：

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

---

更新2019-该方法还支持淡出：

（需要一些JavaScript代码）

 // We need to keep track of faded in elements so we can apply fade out later in CSS document.addEventListener('animationstart', function (e) { if (e.animationName === 'fade-in') { e.target.classList.add('did-fade-in'); } }); document.addEventListener('animationend', function (e) { if (e.animationName === 'fade-out') { e.target.classList.remove('did-fade-in'); } }); 

 div { border: 5px solid; padding: 10px; } div:hover { border-color: red; } .parent .child { display: none; } .parent:hover .child { display: block; animation: fade-in 1s; } .parent:not(:hover) .child.did-fade-in { display: block; animation: fade-out 1s; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } 

 
 Parent 
 Child 
  

---

#30楼

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

然后淡入，添加另一个CSS类，例如“ on”，将不透明度设置为1并定义不透明度的过渡。 就像您想象的那样，您将不得不使用JavaScript将“ on”类添加到元素中，但是至少您仍在使用CSS进行实际的过渡。

PS：如果您发现自己同时需要执行display:block和添加类“ on”的情况，请使用setTimeout推迟后者。 否则，浏览器只会同时看到这两种情况并禁用过渡。