是否可以使用CSS转换显示？

Question

像

这样的东西

#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

或者您可以使用$(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>

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = False

Answer 2

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

Answer 3

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

<section>

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