如何转换 CSS 显示 + 不透明属性

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的变化时才有效。

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

355750 次浏览
小开

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

小开

你可以使用 CSS 动画:

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

我所做的一件事是将初始状态的页边距设置为类似“裕度-左: -9999像素”的值，这样它就不会出现在屏幕上，然后在悬停状态上重置“裕度-左: 0”。在这种情况下，将其保持为“ display: block”。对我有效:)

编辑: 保存状态，而不是恢复到以前的悬停状态? 好吧，这里我们需要 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>
小开

我改变了一点，但结果是美丽的。

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


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

谢谢大家。

小开
最佳答案

基于 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;
}
}
小开

这种变通方法是有效的:

  1. 定义“关键帧”:

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

  2. Use this “keyframe” on “hover”:

    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;
}
小开

如果可能的话，使用 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;
}
小开

我也有同样的问题。我尝试使用动画而不是过渡——正如@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;
}
小开

还有另一个好方法可以通过使用指针事件来实现这一点:

.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及以下版本不支持这一点。

小开

对于绝对元素或固定元素，也可以使用 z-index:

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


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

其他元素现在应该具有 -100到100之间的 z 索引。

小开

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

显示 + 不透明度显示 + 不透明度

我的方法解决了一个更一般的问题，但也许这是应该通过使用 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不会破坏布局的情况下，移动对象将是一个可行的替代方案。

虽然我没有回答这个问题，但是我希望我的问题一针见血。

小开

如果您使用 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);
小开

我用这个来实现它。它们在悬停时褪色，但隐藏时不占空间，完美！

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


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

为了在 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;
}
}
小开

如何使用 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>

或者检查这个演示文件

函数投票(){
Var Vote = getElementById (“ yourviews”)
如果(this. workWith You) :
选票 + = 1} ;
哈哈

小开

我在 Chrome 中也有不透明的转换问题, 我的图片/文本，将立即显示与不透明度1. 。 当他们应该有不透明度0，然后过渡到不透明度1..。

我认为这个 bug 可能与这样一个事实有关，那就是带有不透明度1的“ end”类几乎是瞬间出现的(我的逻辑是从。开始类-不透明度0-到。结束类-不透明度1-和转换特性应该照顾它...)

这个 bug 只会发生在 Chrome 中。

我是怎么解决的: 我将与 CSS 转换相关的 CSS 从 CSS 文件移到了页面上的 STYLE 标记中。

很奇怪吧？

Chrome 的错。


提交答案