如何使用display：block在<ul>悬停时显示<li>的动画显示非常慢

Question

以下为示例代码，我希望

在悬停时缓慢显示

 #container p
{
    display: none;
    transition: all 3s ease;
}

#container:hover p
{
    display: block;
}

Answer 1

这是您要寻找的吗？

.listcontainer ul {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all .4s ease;
}

.listcontainer:hover ul {
  /* animation will look best if you set a value here that roughly "fits" (make sure this is never too small) */
  max-height: 200px;
  opacity: 1;
  transition: all 3s ease;
}

<div class="listcontainer">
  hover me
  <ul>
    <li><a href="https://mozilla.github.io/nunjucks/templating.html" class="link-external">Nunjucks Templating Language</a></li>
    <li><a href="https://kangax.github.io/compat-table/es6/" class="link-external">Javascript compatibility table</a></li>
    <li><a href="https://mdbootstrap.com/" class="link-external">Material Design auf Basis von Bootstrap 4.0</a></li>
    <li><a href="http://css2sass.herokuapp.com/" class="link-external">CSS in SCSS umwandeln</a></li>
    <li><a href="https://medium.com/@addyosmani/accessible-ui-components-for-the-web-39e727101a67" class="link-external">Artikel: Accessible UI Components For The Web</a></li>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy" class="link-external">HTTP/Headers/Content-Security-Policy</a></li>
  </ul>
</div>

Answer 2

您可以使用不透明度属性：

 #container p
{
    opacity: 0;
    transition: all 3s ease;
}

#container:hover p
{
    opacity: 1;
}

Answer 3

只需将“显示”属性更改为“不透明度”，如下所示：

#container p
{
    opacity: 0;
    transition: all 3s ease;
}

#container:hover p
{
    opacity: 1;
    transition: all 3s ease;
}