По какой-то причине этот код работает в Safari, но не в Chrome. В Safari кнопка гамбургера анимируется в X. В Chrome она просто щелкает между двумя состояниями. Я что-то упускаю из виду или я использую свойство, которое Chrome не поддерживает?
var el = document.querySelector('.menu-button');
el.onclick = function() {
el.classList.toggle('toggled');
}
.menu-button {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.menu-button:hover {
cursor: pointer;
}
.menu-button .line {
background-color: #333;
width: 20px;
height: 2px;
border-radius: 1px;
transition: margin 0.2s ease-in-out 0.2s, transform 0.2s ease-in-out 0;
}
.menu-button .line:last-child {
margin-top: 4px;
}
.menu-button.toggled .line {
transition-delay: 0, 0.2s;
transition-property: margin, transform;
}
.menu-button.toggled .line:first-child {
margin-top: 2px;
transform: rotate(45deg);
}
.menu-button.toggled .line:last-child {
margin-top: -2px;
transform: rotate(-45deg);
}
<div class="menu-button">
<div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
-1
colindunn
19 Дек 2019 в 21:56
1 ответ
Эта строка неверна:
transition: margin 0.2s ease-in-out 0.2s, transform 0.2s ease-in-out 0;
Должно быть:
transition: margin 0.2s ease-in-out, transform 0.2s ease-in-out;
< Сильный > EDIT :
Он работает в Chrome, если вы добавите s
в финал 0
:
transition: margin 0.2s ease-in-out 0.2s, transform 0.2s ease-in-out 0s;
1
T. Short
19 Дек 2019 в 19:21
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.