Как убрать анимацию при ресайзе окна?

Question

[Никита]

Пример: 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%;
}

}

Comments

[DTX]

Для начала нужно научится пользоваться codepen.io или jsfiddle

[Александр Сисюкин]

Тоже интересно, есть у кого идеи?

[Никита]

DTX, так должно быть проще понять, потяните рамки результата-контейнера https://jsfiddle.net/xt5q505y/