动画CSS3：显示+不透明度

时间：2011-12-09 18:18:53

标签： css animation css3

我遇到了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。

的更改时有效

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

14 个答案:

答案 0 :(得分：99)

根据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 :(得分：38)

您可以使用CSS动画：

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

答案 2 :(得分：29)

如果可能 - 请使用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;
}

答案 3 :(得分：8)

此解决方法有效：

  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. 在“悬停”中使用此“关键帧”：

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

答案 4 :(得分：7)

我用它来实现它。它们在悬停时褪色但隐藏时没有空间，完美！

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

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

答案 5 :(得分：6)

我改变了一下，但结果很美。

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

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

谢谢大家。

答案 6 :(得分：4)

我遇到了同样的问题。我尝试使用动画而不是转换 - 正如@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;
}

答案 7 :(得分：3)

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

您发现问题的发生是因为在显示时忽略了动画：无元素但浏览器一次应用所有更改，并且元素从不显示：阻止，而不是同时动画。

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

这是一个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);

答案 8 :(得分：2)

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

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

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

其他元素现在的z-index应介于-100和100之间。

答案 9 :(得分：2)

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

  

显示+不透明度

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

我希望尽管我没有回答这个问题，但我还是抓住了这个问题。

答案 10 :(得分：1)

要在onHoverIn / 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;
  }
}

答案 11 :(得分：1)

如何使用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投票= getElementById（“ yourOpinion”）
  if（this.workWithYou）：
      投票+ = 1};
  大声笑

答案 12 :(得分：0)

我做的一件事是将初始状态的边距设置为“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>

答案 13 :(得分：-4)

display:不可转换。您可能需要使用jQuery来执行您想要执行的操作。

相关问题
最新问题