Задать вопрос
@loripopser
css

Почему не работает transition свойство при адаптации на первом скачке?

Здравствуйте! При адаптации на первом скачке media (max-width: 1199px) не работает свойство transition. При дальнейшем уменьшении экрана 991px, 767px.... все работает. Уже методом тыка начал делать, везде подставлять transition, все равно не работает на 1199px плавный переход. Подскажите пожалуйста, в чем проблема и как исправить.

https://codepen.io/fcyzyjnk-the-decoder/pen/JjeOVRv

HTML
<body>
    <!-- Верхняя шапка -->
    <section class="header-top">
        <div class="container header-top__container">
            <!-- Левая часть верхней шапки -->
            <div class="header-top__left">
                <!-- Номер телефона -->
                <div class="header-top__mobile">
                    <figure class="header-top__mobile-icon">
                        <img src="icons/mobile.svg" alt="Иконка мобильного">
                    </figure>
                    <div class="header-top__mobile-number"><a href="tel:+7922 022-94-82">+7 (922) 022-94-82</a></div>
                </div>
                <!-- Почта -->
                <div class="header-top__mail">
                    <figure class="header-top__mail-icon">
                        <img src="icons/mail.svg" alt="Иконка почты">
                    </figure>
                    <div class="header-top__mail-address"><a href="mailto:janis62@yahoo.com">janis62@yahoo.com</a>
                    </div>
                </div>
            </div>
             <!-- Правая часть верхней шапки -->
            <div class="header-top__right">
                <a href="#">Заказать звонок</a>
            </div>
        </div>
    </section>
</body>


SASS
body
    font-family: 'Nunito Sans', sans-serif
    color: #222
    font-size: 14px

.container
    max-width: 1320px
    margin: 0 auto
    padding: 0 10px
    transition: 0.5s all

// Верхняя шапка

.header-top
    background-color: #010101
    &__container
        min-height: 52px
        display: flex
        justify-content: space-between
        align-items: center
    &__left
        display: flex
        align-items: center
        a
            color: #fff

    &__mobile
        display: flex
        align-items: center
        margin-right: 28px
        min-height: 20px

    &__mobile-icon
        margin-right: 12px
        height: 21px

    &__mobile-number

    &__mail
        display: flex
        align-items: center
    &__mail-icon
        margin-right: 12px
        height: 15px
    &__mail-address

    &__right
        a
            color: $color-blue
            font-weight: bold

//==================================//

// Мобильная версия

// max-width: 1199px
@media (max-width: 1199px)
    .container
        width: 960px


// max-width: 991px
@media (max-width: 991px)
    .container
        width: 720px


// max-width: 767px
@media (max-width: 767px)
    .container
        width: 540px


// max-width: 575px
@media (max-width: 575px)
    .container
        width: 100%
    .header-top
        &__mail
            display: none
  • Вопрос задан
  • 141 просмотр
2 комментария
Подписаться 1 Средний 2 комментария
Решения вопроса 1
Le_Traceur_Snork
@Le_Traceur_Snork
PHP-программист | Wordpress
Потому, что у Вас .container не определяет свойство width вне медиа-запросов, а значит берёт значение по-умолчанию (`auto`), не являющееся числовым. Transition с нечислового до числового значения и обратно не работает

Как вариант решения: установите для .container вне медиа-запросов width: 1120px (или сами выберите) - я проверил, работает
Ответ написан
5 комментариев
5 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Frontend разработчик
Базис-Центр • Коломна
от 30 000 до 70 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Собрать 50 контактов небольших он/оффлайн курсов программирования
05 мая 2024, в 10:12
7000 руб./за проект
Настройка рекламы на Яндекс.Директ и ВКонтакте
05 мая 2024, в 10:10
20000 руб./за проект
Доработать ИИ в Unreal Engine 5.2.1
05 мая 2024, в 10:09
4000 руб./за проект
Ещё заказы