在页面加载时使用动画增加ul自动高度

Question

我是新蜜蜂。我想在页面加载时使用动画增加自动高度。在CSS中有可能吗？请帮帮我。

<ul>
    <li><a href="/">title 1</a></li>
    <li><a href="/">title 2</a></li>
    <li><a href="/">title 3</a></li>
    <li><a href="/">title 4</a></li>
    <li><a href="/">title 5</a></li>
</ul>

Answer 1

您实际上可以在CSS中完全执行此操作，从而保持严格且正确的关注点分离，这意味着所有样式都保持在CSS的边界/范围内：

ul {
  max-height: 0;
  overflow: hidden;
  animation-name: grow;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  -webkit-animation-name: grow;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
}
@keyframes grow {
  from {
    max-height: 0
  }
  to {
    max-height: 200px
  }
}
@-webkit-keyframes grow {
  from {
    max-height: 0
  }
  to {
    max-height: 200px
  }
}

<ul>
  <li><a href="/">title 1</a>
  </li>
  <li><a href="/">title 2</a>
  </li>
  <li><a href="/">title 3</a>
  </li>
  <li><a href="/">title 4</a>
  </li>
  <li><a href="/">title 5</a>
  </li>
</ul>