是否可以使用CSS转换显示？ [重复]

Question

这个问题在这里已有答案：

• Transitions on the display: property 30个答案

就像是

#apex1-1{
  width: 100%;
  height: 40px;
  background: rgba(255, 255, 255, 0.8);
}
#apex1-1a{
  display: none;
  transition: display 2s;
}

当你设置它的显示时，我希望它逐渐显示，而不是只是弹出有问题的元素。

Answer 1

无法为显示属性设置动画您可以为某些属性设置动画，找到所有可以在此处设置动画的属性Properties can be animated link

或者你可以使用Visibility Opacity or jQuery FadeOut or Hide属性

$(document).ready(function() {
    $("#apex1-1a").hover(function() {
        $(this).css('visibility','hidden');
    });
    $("#apex1-2a").hover(function() {
        $(this).css({'visibility':'hidden','opacity':0});
    });
    $("#apex1-3a").hover(function() {
        $(this).fadeOut(1000);
    });
});

#apex1-1{
  width: 100%;
  height: 40px;
  background: rgba(255, 255, 255, 0.8);
}
#apex1-1a {
  transition: all 1s;
}
#apex1-2a {
  transition: all 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="apex1-1">
    <a href="#" id="apex1-1a">With Visibility</a>
</div>
<div id="apex1-2">
    <a href="#" id="apex1-2a">With Visibility and opacity</a>
</div>
<div id="apex1-3">
    <a href="#" id="apex1-3a">Jquery FadeOut</a>
</div>

Answer 2

您可以使用opacity，并且当执行转换时，您可以在元素上创建position: absolute以留下通量。

Answer 3

不，您无法使用display属性进行转换。但相反，你可以做这样的事情：

#apex1-1{
  width: 100%;
  height: 40px;
  background: rgba(255, 255, 255, 0.8);
}
#apex1-1a{
 height : 0px;
  transition: display 2s;
}

我想这可行，或者您可以使用上面提到的其他方法。快乐的编码:)。