显示屏上的转换:属性

Question

我目前正在设计一种CSS'mega dropdown'菜单 - 基本上是一个普通的CSS-only下拉菜单,但包含不同类型的内容.

目前,似乎CSS3过渡不适用于"display"属性,即你不能做任何类型的过渡display: none到display: block(或任意组合).

当有人将鼠标悬停在其中一个顶级菜单项上时,是否有人会想到上述示例中的第二层菜单可以"淡入"？

我知道你可以在visibility:属性上使用转换,但我想不出有效利用它的方法.

我也尝试过使用身高,但这只是失败了.

我也知道使用JavaScript实现这一点是微不足道的,但是我想挑战自己只使用CSS而且我认为我有点短.

所有和任何建议最受欢迎.

Answer 1

您可以连接两个或更多转换,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;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

(不要忘记transition属性的供应商前缀)

更多细节在本文中

Answer 2

您需要通过其他方式隐藏元素才能使其生效.

我通过<div>绝对定位两个s并将隐藏的一个设置为来完成了效果opacity: 0.

如果您甚至将display属性切换none为block,则不会发生对其他元素的转换.

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

1. 设置height为0.
2. 设置opacity为0.
3. 将元素定位在具有的另一个元素的框架之外overflow: hidden.

可能有更多解决方案,但如果您将元素切换为,则无法执行转换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;
}

Answer 3

在本文发表时,如果您尝试更改display属性,所有主流浏览器都会禁用CSS过渡,但CSS动画仍然可以正常工作,因此我们可以将它们用作解决方法.

示例代码: - (您可以相应地将它应用于您的菜单) 演示

将以下CSS添加到样式表: -

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

然后将fadeIn动画应用于父hover上的子项: - (当然设置display: block)

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

更新2019 - 也支持淡出的方法:

(有些JS需要)

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

<div class="parent">
    Parent
    <div class="child">
        Child
    </div>
</div>

Answer 4

我怀疑如果"显示"发生变化,过渡被禁用的原因是因为显示实际上是什么.它并没有改变任何东西,可以令人信服地平滑的动态.

"display:none;"和"visibility:hidden;"是两个完全不同的东西.两者都具有使元素不可见的效果,但是"visibility:hidden;"它仍然在布局中呈现,但只是不明显.隐藏元素仍占用空间,仍然以内联或块或块内联或表格或"display"元素告诉它呈现为的方式呈现,并相应占用空间.其他元素不会自动移动以占据该空间.隐藏元素只是不将其实际像素渲染到输出.

另一方面,"display:none"实际上阻止了元素的完全渲染.它不占用任何布局空间.其他元素将占据该元素占用的部分或全部空间,现在可以调整占据该空间,就好像该元素根本不存在一样.

"显示"不仅仅是另一种视觉属性.它建立元素的整个渲染模式,例如它是块,内联,内联块,表,表行,表格单元,列表项还是其他任何东西!每个都有非常不同的布局分支,并且没有合理的方法来动画或平滑过渡它们(试图想象从"块"到"内联"的平滑过渡,或反之亦然,例如!).

这就是为什么在显示改变时禁用转换的原因(即使改变是来自或来自"无" - "无"不仅仅是不可见,它是它自己的元素渲染模式,这意味着根本不进行渲染!),

Answer 5

display 不是转换所依据的属性之一.

有关可应用转换的CSS属性列表,请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties.有关如何插值的信息,请参阅https://drafts.c​​sswg.org/css-values-4/#combining-values.

最高CSS3列于https://www.w3.org/TR/2017/WD-css-transitions-1-20171130/#animatable-css(只需关闭警告弹出窗口)

Answer 6

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

#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毫秒延迟,400ms的持续时间),和高度等待400毫秒,然后才立即(0毫秒)恢复初始值(相当于display: none在动画回调).

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

有关更多示例,请参阅此文章.

Answer 7

我知道这是一个非常古老的问题,但对于正在查看此线程的人,您现在可以向块属性添加自定义动画.

@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仍然设置为淡入淡出.

Answer 8

我找到了解决这个问题的更好方法，您可以使用 CSS Animation 并制作显示项目的出色效果。

.item {
     display: none;
}

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

@keyframes fade_in_show {
     0% {
          opacity: 0;
          transform: scale(0)
     }

     100% {
          opacity: 1;
          transform: scale(1)
     }
}

Answer 9

根据W3C 2013年11月19日的工作草案, display不是动画属性.幸运的是,它visibility是可动画的.您可以使用不透明度转换(JSFiddle)链接其转换:

• HTML:

  <a href="http://example.com" id="foo">Foo</a>
  <button id="hide-button">Hide</button>
  <button id="show-button">Show</button>
  

• 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,那么它将保持可点击状态.

Answer 10

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

它到目前为止有效!

Answer 11

编辑:在此示例中未显示任何未应用.

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

上面发生的是,99%的动画显示设置为阻止,而不透明度淡出.在最后一刻,display属性设置为none.

最重要的一点是在动画结束后使用动画填充模式保留最后一帧:前进

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

以下是两个例子:https://jsfiddle.net/qwnz9tqg/3/

Answer 12

我今天碰到了这个position: fixed,我正在重用一个模态.我无法保留它display: none,然后动画它,因为它只是跳入外观,并且z-index(负值等)也做了奇怪的事情.

我也使用height: 0到height: 100%,但只有当出现模式工作.这与您使用的left: -100%东西相同.

然后让我感到有一个简单的答案.等瞧:

首先,你隐藏的模态.注意heightis 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;
}

就是这样,它就像一个魅力.

Answer 13

从其中一些答案和其他地方的一些建议中得出,以下内容适用于悬停菜单(我将其与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因为s height:auto不允许transition.悬停值可能max-height需要大于height菜单的悬停值.

Answer 14

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

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

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

Answer 15

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

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

Answer 16

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

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

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

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

Answer 17

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

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

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

Answer 18

更改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.

Answer 19

不需要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

Answer 20

在Guillermo接受的答案被写入后,2012年4月3日的CSS转换规范改变了可见性转换的行为,现在可以在不使用转换延迟的情况下以更短的方式解决此问题:

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

为两个转换指定的运行时间通常应该相同(尽管稍长的可见性时间不是问题).有关正在运行的版本,请参阅我的博客 http://www.taccgl.org/blog/css-transition-visibility.html#visibility-opacity.

Wrt题为"转换显示:属性"的问题,并回应Rui Marques和josh对已接受答案的评论:此解决方案适用于如果使用显示或可见性属性无关紧要的情况(因为它可能是这个问题的情况).它不会完全删除元素display:none,只是让它不可见但它仍然停留在文档流中并影响以下元素的位置.完全删除类似于display的元素的过渡:none可以使用height(如其他答案和注释所示),max-height或margin-top/bottom来完成,但也可以看到 如何转换高度:0; 高度:自动; 用CSS？ 和我的博客http://www.taccgl.org/blog/css_transition_display.html.

回应GeorgeMillo的评论:需要属性和两个转换:不透明度属性用于创建淡入和淡出动画以及可见性属性,以避免元素仍对鼠标事件做出反应.视觉效果的不透明度和延迟隐藏的可见性需要转换,直到淡出结束.

Answer 21

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

\n

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

\n

从一个像这样的盒子开始：

\n

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

\n

一个隐藏的盒子。

\n

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

\n

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

\n

/sf/answers/1160306801/

\n

首先，一个库将上述技巧形式化：

\n

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

\n

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

\n

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

\n

这会使框淡入和淡出。因此，.noTrnsn()关闭转换，然后我们删除该类hidden，该类display将从none默认值block. 然后我们将不透明度设置为 0 以准备淡入。现在我们已经做好了准备，我们使用 重新打开过渡.resumeTrnsn()。最后，将不透明度设置为 1 来开始过渡。

\n

如果没有库，显示的更改和不透明度的更改都会给我们带来不希望的结果。如果我们只是删除库调用，我们根本不会得到任何转换。

\n

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

\n

想要！

\n

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

\n

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

\n

我们现在正在转换高度和不透明度。请注意，我们没有设置高度，这意味着它是默认高度auto。按照惯例，这是无法转换的 - 从自动移动到像素值（如 0）将不会导致转换。我们将使用库和另一种库方法来解决这个问题：

\n

$.fn.wait = function (time, fn) {\n    if (time)\n        this.delay(time);\n    if (!fn)\n        return this;\n\n    var _this = this;\n    return this.queue(function (n) {\n        fn.call(_this);\n        n();\n    });\n};\n

\n

这是一种方便的方法，可以让我们参与 jQuery 现有的 fx/animation 队列，而不需要任何现在被排除在 jQuery 3.x 中的动画框架。我不会解释 jQuery 是如何工作的，但足以说明，jQuery 提供的管道.queue()和.stop()管道帮助我们防止动画相互干扰。

\n

让我们制作向下滑动效果的动画。

\n

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

\n

这段代码首先通过检查#box它的类来检查它当前是否隐藏。但它wait()通过在滑出/淡入动画末尾添加类来使用库调用完成更多工作，hidden您希望找到它是否实际上是隐藏的 - 这是上面更简单的示例无法做到的。这恰好也会反复显示/隐藏元素，这是前面示例中的一个错误，因为隐藏的类从未恢复。

\n

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

\n

旧答案

\n

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

\n

您可以通过以下方式使其在单击时转换：

\n

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

\n

CSS 就是你猜的那样：

\n

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

\n

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

\n

注意：我.animate(maxWidth)在这里滥用是为了避免setTimeout竞争条件。setTimeout当您或其他人在不知情的情况下获取代码时，很快就会引入隐藏的错误。.animate()很容易被杀死.stop()。我只是用它在标准 fx 队列上放置 50\xc2\xa0ms 或 2000\xc2\xa0ms 延迟，在此基础上构建的其他编码人员很容易找到/解决。

\n

Answer 22

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

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

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

Answer 23

它就像以下一样简单:)

@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;。还要确保使用 forwards 以使其保持最终状态。

Answer 24

用CSS 动画淡化它：

.item {
     display: none;
}

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

@keyframes fadeIn {
     from {
          opacity: 0;
     }

     to {
          opacity: 1;
     }
}