@Ilexa

Не работает свойство transition на мобильных устройствах?

Есть бургер через chekbox в шапке сайта, при нажатии на кнопку все, что принадлежит классу btn анимируется плавно со свойством transition и на пк и мобильном устройстве(на айфоне в safari и chrome), но вот сам блок с пунктами меню, которому указано свойство top: -100% изначально, на пк возвращается плавно при нажатии кнопки, а на телефоне нет, уже что только не пробовал.(

Код: https://codepen.io/ilexa13/pen/QWmWEBO

Вижу, что похожий вопрос https://qna.habr.com/q/849825 уже был, но ответ я там не нашел.
  • Вопрос задан
  • 89 просмотров
Решения вопроса 1
@Ilexa Автор вопроса
Нашел большое количество вопросов похожих на мой, но все они были оставлены без ответа. Префиксы именно здесь не помогли, но на всякий случай уже подключил автопрефиксер. В данном случае на айфоне не работала анимация возврата меню из-за того, что для блока с пунктами меню в свойстве top: -100%; значение было указано в процентах, тогда как при нажатии на кнопку было объявлено это свойство со следующим значением top: 0;
Протестил несколько раз с префиксами и без, все стало плавно работать только с процентным значением в свойстве top: 0%;
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
gogowq
@gogowq
Ozh domosh acha ozh
Я бы попробовал добавить условно такое -
-webkit-transition: -webkit-transform 0.6s ease-out;
-moz-transition: transform 0.6s ease-out;
 -o-transition: transform 0.6s ease-out;
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы