Question

我使用转换创建手风琴动画

.ac-container input:not(:checked) ~ article.ac-small{
        background: rgba(255, 255, 255, 0.5);
        margin-top: -1px;
        overflow: hidden;
        height: 0px!important;
        position: relative;
        z-index: 10;
        transition:height 0.3s ease-in-out;
    }

以上代码是指该部分关闭时的情况但是当我想打开这个部分时，我需要设置一个高度，但我不知道确切的高度是什么，因为它根据它包含的数组长度进行渲染。

我找到了一种使用js代码的方法...

  $('.ac-container .onCallUsersSection input:checked ~ article.ac-small').css({'height' : $ctrl.lstOnCallUsers.length * 73 + 'px', 'transition': 'height 0.3s ease-in-out'});

我怎么能用css而不用js呢？

Answer 1

解决方案是使用max-height：0px！important;和最大高度：230px;

.ac-container input:not(:checked) ~ article.ac-small{
        background: rgba(255, 255, 255, 0.5);
        margin-top: -1px;
        overflow: hidden;
        max-height: 0px!important;
        position: relative;
        z-index: 10;
        transition:max-height 0.3s ease-in-out;
    }

    .ac-container input:checked ~ article.ac-small{
        transition: max-height .3s ease-in-out;
        max-height: 230px;
    }

CSS如何根据子元素数设置元素的高度

1 个答案: