css关键帧动画动态高度

Question

您好我的子菜单有以下css。它用于在页面加载时打开它们。它工作得很好但是我注意到如果在动画的结束状态我设置{{1}然后动画没有被执行。这对我来说是一个问题，因为在我的网站中我有很多子菜单，其中包含n个子菜单，所以我必须动态填充子菜单的高度。可能吗 ？

height:auto;

PS：我对纯css解决方案很感兴趣。

Answer 1

不要动画height，而是尝试动画transform: translateY()，如下所示（您将获得真正的滑动效果）：

@keyframes slideDown{
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}