9

您好，我的子菜单有以下 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 解决方案感兴趣。

4

3 回答 3

19

代替动画height，尝试transform: translateY()如下动画（您将获得真正的滑动效果）：

@keyframes slideDown{
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
于 2013-11-03T15:31:38.730 回答
1 
@keyframes pageLoadSubnavDropdown {
    0% {
        max-height: 0px;
    }
    100% {
        max-height: 300px;
    }
}

这对我有用，但仍然有一个猜谜游戏，因为最大高度仍然必须超过所有元素的最大高度。无论下拉菜单中有多少元素，第二个数字越高，动画的传播速度就越快。

对于特定范围的元素，这将是一个很好的修复，而不是完全动态的元素范围。

于 2021-08-13T22:26:50.917 回答
0

我认为这也可能有效

#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

于 2021-11-20T09:41:52.330 回答