相关疑难解决方法(0)

css关键帧动画动态高度

你好我的子菜单有以下css.它用于在页面加载时打开它们.它工作得很好但是我注意到如果在动画的结束状态我设置height:auto;那么动画没有被执行这对我来说是一个问题,因为在我的网站上我有很多子菜单,其中有很多子菜单,所以我必须动态填充子菜单的高度.可能吗 ?

   @-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;
    }
Run Code Online (Sandbox Code Playgroud)

PS:我对纯css解决方案很感兴趣.

css

6
推荐指数
1
解决办法
1万
查看次数

标签 统计

css ×1