Анимируйте элементы с разной высотой, чтобы расти с одинаковой скоростью в CSS - PullRequest
Новая
       7

Анимируйте элементы с разной высотой, чтобы расти с одинаковой скоростью в CSS

0 голосов
/ 15 сентября 2018

У меня есть несколько 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, насколько я понял, не может быть и речи.

1 Ответ

0 голосов
/ 15 сентября 2018

Не без использования 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);
    });
});

Не проверял, хотя ... Дайте мне знать, если это работает!

...