CSS关键帧动画动态高度 [英] css key-frames animating dynamic height

问题描述

你好，我的子菜单有以下css，用于在页面加载时打开它们，效果很好，但是我注意到如果在动画的结束状态下我设置 height：auto; 则动画没有被执行。这对我来说是个问题，因为在我的站点中有很多子菜单，其中有n个孩子，因此必须填充高度动态子菜单。可能吗 ？

Hello I have the following css for my sub-menus.It is used in order to open them when the page loads.It works great, however I noticed that if at the end state of the animation I set height:auto; then the animation is not being executed.This is an issue for me because in my site I have many sub-menus with n amount of children in them so I must populate the height of the sub-menu dynamically. Is it possible ?

   @-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解决方案感兴趣。

PS: I'm interested in a pure css solution.

推荐答案

代替动画高度，尝试动画 transform：translationY （），如下所示（您将获得真正的滑动效果）：

Instead of animating height, try animating transform: translateY() as follows (you will get a true sliding effect):

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

这篇关于CSS关键帧动画动态高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！