Пример: https://jsfiddle.net/xt5q505y/
Суть в следующем:
Есть меню, при ширине окна в 768 пикс я его увожу вправо трансформацией, чтобы потом по клику на бургер оно выезжало. Все бы супер, но для эффекта нужен транзишн, с ним ездит плавно. При ресайзе окна меню также плавает слева-направо, так как сперва панельке нужно перейти в положение (100%,0)
transform: translate(100%,0);
transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out;
Как это победить? Нужно, чтобы панелька ездила туда и обратно только по клику на бургер (присваиваю класс и меняю трансформ), но при ресайзе окна чтобы не плавало.
media screen and (max-width: 768px) {
.mmenu {
padding: 80px 0;
z-index: 400;
position: fixed;
top: 0;
right: 0;
transform: translate(100%,0);
transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out;
display:flex;
flex-direction:column;
justify-content: center;
align-items: center;
justify-content: space-around;
background:#26303b;
height:100%;
width:100%;
}
}
Простой
