@nemovalex

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

Хотел сделать бургер меню с легкой анимацией, с дестктопов и ноутбуков все работает нормально даже когда открываешь эмуляцию мобильного устройства, но cтоит открыть на телефоне работает анимация только для свойства
top но не работает для transform
Код:
<div class="burger-btn" onclick="activeBurgerMenu(this)">
							<div class="burger"></div>
						</div>

CSS (SCSS)
.burger-btn
{
  background: $header-color;
  height: 30px;
  width: 30px;
  display: flex;
  justify-content:center;
  align-items:center;
}

.burger 
{
  width: 30px;
  height: 5px;
  background-color: #fff;
  position: relative;
  cursor: pointer;
  -webkit-transition: background-color 0.2s ease-in 0.2s;
  -moz-transition: background-color 0.2s ease-in 0.2s;
  -ms-transition: background-color 0.2s ease-in 0.2s;
  -o-transition: background-color 0.2s ease-in 0.2s;
  transition: background-color 0.2s ease-in 0.2s;
}

.burger::before
{
  position: absolute;
  left: 0;
  top: -10px;
  content: '';
  display: block;
  width: 30px;
  height: 5px;
  background: #fff;
  -webkit-transition: transform 0.2s ease-in,top 0.2s linear 0.2s;
  -moz-transition: transform 0.2s ease-in,top 0.2s linear 0.2s;
  -ms-transition: transform 0.2s ease-in,top 0.2s linear 0.2s;
  -o-transition: transform 0.2s ease-in,top 0.2s linear 0.2s;
  transition: transform 0.2s ease-in,top 0.2s linear 0.2s;
}

.burger::after
{
  position: absolute;
  left: 0;
  top: 10px;
  content: '';
  display: block;
  width: 30px;
  height: 5px;
  background: #fff;
  -webkit-transition: transform 0.2s ease-in,top 0.2s linear 0.2s;
  -moz-transition: transform 0.2s ease-in,top 0.2s linear 0.2s;
  -ms-transition: transform 0.2s ease-in,top 0.2s linear 0.2s;
  -o-transition: transform 0.2s ease-in,top 0.2s linear 0.2s;
  transition: transform 0.2s ease-in,top 0.2s linear 0.2s;
}

.burger-btn.active
{
	.burger
	{
	   background-color: transparent;
	   -webkit-transition: background-color 0.2s ease-in 0.2s;
	   -moz-transition: background-color 0.2s ease-in 0.2s;
	   -ms-transition: background-color 0.2s ease-in 0.2s;
	   -o-transition: background-color 0.2s ease-in 0.2s;
	   transition: background-color 0.2s ease-in 0.2s;
	}

	.burger::before
	{  
	    top:0;
	    -webkit-transform: rotate(45deg);
	    -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	    -o-transform: rotate(45deg);
	    transform: rotate(45deg);
	    -webkit-transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
	    -moz-transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
	    -ms-transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
	    -o-transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
	    transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
	}

	.burger::after
	{	
		top: 0;
	    -webkit-transform: rotate(-45deg);
	    -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	    -o-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	    -webkit-transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
	    -moz-transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
	    -ms-transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
	    -o-transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
	    transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
	}
}
  • Вопрос задан
  • 269 просмотров
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Добавьте начальные значения transform
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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