动画 CSS3：显示 + 不透明度答案

【问题标题】：Animation CSS3: display + opacity动画 CSS3：显示 + 不透明度
【发布时间】：2012-01-17 00:11:06
【问题描述】：

我遇到了 CSS3 动画的问题。

.child {
    opacity: 0;
    display: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    display: block;
}

此代码仅在我删除 display 的更改时才有效。

我想在悬停后更改显示，但应使用过渡更改不透明度。

【问题讨论】：

如果 CSS 不能像其他人建议的那样工作，here's 一个非常简单的 Javascript 代码用于褪色。
没有人提到animation-fill-mode: forwards; 所以，在这种情况下，display 在不透明动画运行后恢复为none。这个 CSS 设置保持动画的最后状态，所以它是 display: block

标签： animation css

【解决方案1】：

display: 不可转换。你可能需要使用 jQuery 来做你想做的事情。

【讨论】：

老兄，你必须停止到处宣传 jQuery。
@BenjaminGruenbaum jQuery 是一个了不起的人。它很棒，可以做所有事情。

【解决方案2】：

您可以使用 CSS 动画：

0% display:none ; opacity: 0;
1% display: block ; opacity: 0;
100% display: block ; opacity: 1;

【讨论】：

好主意，我成功地在悬停期间使用动画填充模式保持显示我的元素，但随后鼠标移出，元素消失了。
您可以使用 fill-mode: forwards 在动画结束后持久化更改。

【解决方案3】：

我做的一件事是将初始状态的边距设置为类似于“margin-left：-9999px”，因此它不会出现在屏幕上，然后在悬停状态下重置“margin-left：0”。在这种情况下，保留它“显示：阻止”。对我有用吗:)

编辑：保存状态而不恢复到之前的悬停状态？好的，我们需要 JS：

<style>
.hovered { 
    /* hover styles here */
}
</style>

<script type="text/javascript">
$('.link').hover(function() {
   var $link = $(this);
   if (!$link.hasclass('hovered')) { // check to see if the class was already given
        $(this).addClass('hovered');
   } 
});
</script>

【讨论】：

好主意，但是我鼠标移开，元素消失了……
亚历克西斯，这不是你想做的吗？悬停意味着仅当用鼠标悬停时。请说明您要完成的工作。
是的，对不起。我想在 mouseout 中保存淡入淡出。
这改变了一切。几乎。基本上你想要的是一个 JS 函数，它将检测悬停状态，正如其他用户所指出的那样，并添加......好吧......请参阅我的更新答案。

【解决方案4】：

我改变了一点，但结果很漂亮。

.child {
    width: 0px;
    height: 0px;
    opacity: 0;
}

.parent:hover child {
    width: 150px;
    height: 300px;
    opacity: .9;
}

谢谢大家。

【讨论】：

这与屏幕阅读器不兼容：他们会继续阅读内容。
您可以将 visibility: hidden; 添加到 .child / visibility:visible; 到悬停，这应该可以解决屏幕阅读器问题

【解决方案5】：

根据 Michaels 的回答，这是要使用的实际 CSS 代码

.parent:hover .child
{
    display: block;

    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

【讨论】：

支持所有浏览器.. ?
并非所有浏览器都支持 CSS3。如果要扩展，只需添加正确的前缀
悬停时怎么办，如何实现fadeOutToNone？
由于您可以使用百分比的小数部分，因此最好使用 0.001% 而不是 1% 之类的值，因为它可以最大限度地减少“开始”的延迟，随着动画持续时间的延长，这种延迟会变得明显跨度>
-o-keyframes 指令实际上没有用，因为第一个支持动画的 Opera 版本已经基于 webkit。

【解决方案6】：

此解决方法有效：

定义一个“关键帧”：

@-webkit-keyframes fadeIn { 
  0% { opacity: 0; }
  20% { opacity: 0; }
  40% { opacity: 0.3; }
  60% { opacity: 0.5; }
  80% { opacity: 0.9; }
  100% { opacity: 1; }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  20% { opacity: 0; }
  40% { opacity: 0.3; }
  60% { opacity: 0.5; }
  80% { opacity: 0.9; }
  100% { opacity: 1; }
}

在“悬停”上使用这个“关键帧”：

div a span { 
  display: none;
}

div a:hover span {
  display: block;

  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-name: fadeIn;
  animation-duration: 1s;
}

【讨论】：

您可以简单地使用0% { opacity: 0; } 100% { opacity: 1; } 作为关键帧。

【解决方案7】：

如果可能 - 使用 visibility 而不是 display

例如：

.child {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.parent:hover .child {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s, visibility 0.3s;
}

【讨论】：

可见性属性的问题是它不会隐藏元素，它只会使其不可见。所以它仍然会占用空间。
不仅不可见，而且对事件（点击等）也是透明的。不改变显示意味着不重排文档，这是一件好事。大多数应该通过不透明度淡入/淡出的元素无论如何都应该具有固定或绝对位置。

【解决方案8】：

我遇到了同样的问题。我尝试使用动画而不是过渡 - 正如@MichaelMullany 和 @Chris 所建议的那样 - 但它只适用于 webkit 浏览器，即使我复制粘贴了“-moz”和“-o”前缀。

我能够通过使用visibility 而不是display 来解决这个问题。这对我有用，因为我的子元素是position: absolute，所以文档流不会受到影响。它可能也适用于其他人。

这是使用我的解决方案时原始代码的样子：

.child {
    position: absolute;
    opacity: 0;
    visibility: hidden;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    position: relative;
    opacity: 0.9;
    visibility: visible;
}

【讨论】：

如果您将鼠标悬停在孩子身上，而孩子的动画不在视野范围内，它会突然重新进入，因为该元素只是被隐藏起来了。如果你在这个地方移动鼠标，那会很烦人。

【解决方案9】：

还有另一种使用指针事件完成此任务的好方法：

.child {
    opacity: 0;
    pointer-events: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    pointer-events: all;
}

很遗憾，IE10 及以下版本不支持此功能。

【讨论】：

【解决方案10】：

在绝对或固定元素上，您也可以使用 z-index：

.item {
    position: absolute;
    z-index: -100;
}

.item:hover {
    z-index: 100;
}

其他元素的 z-index 现在应该在 -100 到 100 之间。

【讨论】：

不幸的是，这搞砸了type=password 字段上的 KeePass 密码指示器符号。它不可见。
我们可以停止使用任意 z-index 数字吗？这里：z-index：1； vs z-index: -1 就可以了。选择巨大的 z-index 数字会使事情变得难以管理。

【解决方案11】：

我知道，这不是您问题的真正解决方案，因为您要求

显示 + 不透明度

我的方法解决了一个更普遍的问题，但也许这是应该通过结合使用display 和opacity 来解决的背景问题。

我的愿望是在元素不可见时将其移开。这个解决方案正是这样做的：它移动元素离开了，这可以用于过渡：

.child {
  left: -2000px;
  opacity: 0;
  visibility: hidden;
  transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
}

.parent:hover .child {
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: left 0s, visibility 0s, opacity 0.8s;
}

此代码不包含任何浏览器前缀或向后兼容性黑客。它只是说明了元素在不再需要时如何被移走的概念。

有趣的部分是两个不同的过渡定义。当鼠标指针悬停在.parent 元素上时，需要立即将.child 元素放置到位，然后更改不透明度：

transition: left 0s, visibility 0s, opacity 0.8s;

当没有悬停，或者鼠标指针从元素上移开时，必须等到不透明度更改完成后才能将元素移出屏幕：

transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;

在设置 display:none 不会破坏布局的情况下，将对象移开将是一个可行的选择。

尽管我没有回答，但我希望我能在这个问题上一针见血。

【讨论】：

自 IE9 以来，Microsoft 过滤器已被弃用。您有什么特别的原因想在 2016 年将其添加到答案中吗？
@TylerH 一个人愿意接触多少用户是一个品味问题。
考虑到它已弃用，而且微软不再支持 IE
@TylerH 必须为不会或无法升级到较新浏览器的客户提供服务是很常见的。我有一家知名银行作为客户，仍然使用 IE6 并以“原因”拒绝升级。
@MarcusCunningham 这个问题用css3 标记，完全禁止使用 IE6（以及 IE7 和 IE8）。在最早可能的浏览器中，OP 可能已经编写代码，此答案中的 MS 过滤器已被弃用。而对于未来的读者来说，它甚至更没有用，因为它甚至不被支持。 no 将其包含在此问题的答案中的论点。然而，这是一个有争议的问题，因为 Hannes 已经从他的回答中删除了它。

【解决方案12】：

如果您使用 JS 触发更改，比如说在点击时，有一个很好的解决方法。

你看，问题的发生是因为 display:none 元素上的动画被忽略了，但浏览器一次应用了所有更改，并且元素永远不会在 display:block 上同时没有动画。

诀窍是要求浏览器在更改可见性之后但在触发动画之前渲染帧。

这是一个 JQuery 示例：

    $('.child').css({"display":"block"});
    //now ask the browser what is the value of the display property
    $('.child').css("display"); //this will trigger the browser to apply the change. this costs one frame render
    //now a change to opacity will trigger the animation
    $('.child').css("opacity":100);

【讨论】：

这个问题没有用 JavaScript 和 jQuery 标记
我知道，我写它是为了解释发生这种情况的原因。当我了解到这一点时，它对我非常有用，我希望它也能对其他人有所帮助。
顺便说一句，不透明度值介于 0 和 1 之间

【解决方案13】：

我用它来实现它。它们在悬停时消失，但在隐藏时不占用空间，完美！

.child {
    height: 0px;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-in-out;
}

.parent:hover .child {
    height: auto;
    opacity: 1;
    visibility: visible;
}

【讨论】：

【解决方案14】：

为了在 HoverIn/Out 两种方式上都有动画，我做了这个解决方案。希望对某人有所帮助

@keyframes fadeOutFromBlock {
  0% {
    position: relative;
    opacity: 1;
    transform: translateX(0);
  }

  90% {
    position: relative;
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
  }
}

@keyframes fadeInFromNone {
  0% {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
  }

  1% {
    position: relative;
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    position: relative;
    opacity: 1;
    transform: translateX(0);
  }
}

.drafts-content {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  animation: fadeInFromNone 1s ease-in;
  will-change: opacity, transform;

  &.hide-drafts {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
    animation: fadeOutFromBlock 0.5s ease-out;
    will-change: opacity, transform;
  }
}

【讨论】：

【解决方案15】：

如何使用 CSS 为不透明度设置动画：
这是我的代码：
CSS 代码

.item {   
    height:200px;
    width:200px;
    background:red;
    opacity:0;
    transition: opacity 1s ease-in-out;
}

.item:hover {
    opacity: 1;
}
code {
    background: linear-gradient(to right,#fce4ed,#ffe8cc);
}

<div class="item">

</div>
<p><code> move mouse over top of this text</code></p>

or check this demo file

函数投票(){
var vote = getElementById("yourOpinion")
如果（this.workWithYou）：
投票 += 1 };
哈哈

【讨论】：

不回答问题，因为 display 属性被简单地删除了。