css - 不同高度的动画元素在 CSS 中以相同的速度增长

Question

我有几个不同高度的 div，我想在点击时显示它们的完整高度。我将 animation 与 to 和 from max-height 一起使用。问题是说最高的 div 有 500 像素的全高和最小的 60 像素。它们都以相同的速度生长，但较小的一个或多或少只是突然打开，因为它不是那么高(但在背景中继续“无形地”生长)而较大的一个正常生长。使用 Javascript，这很重要。

使用这段代码:

    .growRow {
    overflow: hidden;
    animation: grow;
    animation-duration: 1s;
    }

@keyframes grow {
    from {
        max-height: 0;
    }
    to {
        max-height: 500px;
    }
}

额外的问题:如果我不知道我的最高 div 的高度，有没有办法让我的代码处理这个问题？据我所知，Auto 是不可能的。

Answer 1

如果不使用 JS... 将您的 CSS 更改为:

.growRow {
    overflow: hidden;
    height: 100px; /* or wathever the start height should be */
    transition: height 1s ease-in-out;
}
.growRow.open {
    height: auto;
}
.no-transition {
    transition: none !important;
}

然后(使用 jQuery)在 Vanilla JS 中:

$(function () {
    $('.growRow').on('click', function () {
        var $growRow = $(this);
        $growRow.addClass('no-transition').addClass('open');
        var newHeight = $growRow.height();
        $growRow.removeClass('open').removeClass('no-transition');
        setTimeout(function ($growRow, newHeight) {
            $growRow.once('transitionend', function () {
                $(this).css('height', '');
            }).css('height', newHeight + 'px');
        }, 0, $growRow, newHeight);
    });
});

虽然还没有测试过...如果有效请告诉我!