CSS关键帧动画动态调整高度

Question

你好，我有以下css用于我的子菜单。它用于在页面加载时打开它们。它工作得很好，但是我注意到如果在动画的结束状态中设置height:auto;，则动画将不会执行。这对我来说是一个问题，因为在我的网站上，我有许多具有n个子项的子菜单，所以我必须动态填充子菜单的高度。这可行吗？

   @-moz-keyframes slidemenu {
        0% {
            height: 0px;
        }
        100% {
            height: 90px;
        }
    }

    @-webkit-keyframes slidemenu {
        0% {
            height: 0px;
        }
        100% {
            height: 90px;
        }
    }

    #side-menu > li.active > ul.sub-menu{
        -moz-animation-delay:0.5s;
        -moz-animation-name: slidemenu;
        -moz-animation-timing-function: ease-out;
        -moz-animation-duration: 0.5s;
        -moz-animation-iteration-count: 1;
        -moz-animation-fill-mode: forwards;

        -webkit-animation-delay:0.5s;
        -webkit-animation-name: slidemenu;
        -webkit-animation-timing-function: ease-out;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-fill-mode: forwards;
    }

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

- 0x_Anakin

---

你能否将一个Fiddle绑定并将你的HTML代码包含在问题中呢？ - apaul

http://jsfiddle.net/xv2BK/ 这个演示了我遇到的问题，我将动画的100%状态设置为高度自适应，以便复制这个问题。 - 0x_Anakin

Answer 1

不要使用动画效果来处理height属性，尝试使用transform: translateY()属性来实现动画滑动效果，例如：

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

- myajouri

---

但是这不会在它扩展时推动下面的元素向下。 - Chase DeAnda

Answer 2

@keyframes pageLoadSubnavDropdown {
    0% {
        max-height: 0px;
    }
    100% {
        max-height: 300px;
    }
}

这对我很有帮助，但仍存在猜测游戏，因为最大高度仍必须超过所有元素的最大高度。第二个数字越高，动画速度就越快，无论下拉菜单中有多少元素。

这对于特定范围的元素是一个好的解决方法，但不适用于完全动态范围的元素。

- Trevor Marshall

---

这通常是最好的非JS解决方案。然而，使用基本的CSS transition: max-height 0.5s 而不是编写关键帧会更简单。 - Arajay

Answer 3

我认为这也可能行得通

#slide-menu {
    background: primary;
    height:100%;
    -webkit-animation: slideDown 3s;
}

//try to declare the keyframes after the #slide-menu
@keyframes slideDown {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
}

您可以根据需要将 background: primary 更改为任何颜色，例如 background: white

- kiotera