0

Как здесь https://codepen.io/rusl10/pen/oRNeqb добавить плавность при переключении вкладок?Что я делаю не так или не дописал?Спасибо.

$(function() {

$('.callback-content__item:not(":first-of-type")').addClass('hidden delete');

    $('.callback-list__item').each(function(i) {
            $(this).attr('data-src', 'src' + (i+1));
    });

    $('.callback-content__item').each(function(i) {
            $(this).attr('data-src', 'src' + (i+1));
            // $(this).attr('src', 'img/services/services' + (i+1) + '.jpg');
    });


    $('.callback-list__item').on('click', function(){
        $('.callback-list__item').removeClass('callback-list--active');
        $(this).addClass('callback-list--active');
        var dataSrc = $(this).data('src');
        var getList = $(this).closest('.row');
        var fotorama = $('.callback-content__item[data-src='+ dataSrc +']');

        // getList.find('.callback-list__item').removeClass('info__active');
        // $(this).addClass('info__active');
        $('.callback-content__item').addClass('hidden');
        $('.callback-content__item').addClass('delete');
        fotorama.removeClass('delete');
        fotorama.removeClass('hidden');
    });

});

1 ответ 1

0

Плавная анимация не происходит из-за display:none у .delete. Нужно заменить это свойство на visibility:hidden;. Далее, чтобы выровнять блоки у .callback-content нужно max-width заменить на width: calc(100% - 130px) и добавить flex-wrap: wrap;. Чтобы блоки были на всю ширину нужно для .callback-content__item добавить width:100% и position: absolute; Итого должно получится:

.delete {
    visibility: hidden;
}
.callback-content {
    position: relative;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 130px);
    justify-content: center;
}
.callback-content__item {
    color: #eeee9f;
    font-size: 24px;
    line-height: 36px;
    transition: opacity 0.5s ease;
    width: 100%;
    position: absolute;
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.