Как исправить анимацию?

Question

[r_g_b_a]

https://jsfiddle.net/3v97fuoa/1/
При изменении ширины в меньшую сторону на брейкпоинте 768px заметно, как div плавно уходит за левую часть экрана. Я хочу, чтобы при ресайзе или повороте экрана он моментально исчезал без какой либо анимации. Она нужна только после нажатия кнопки.
Возможно это исправить средствами css?

P.S. Я исправил проблему, переделав сдвиг блока с помощью left, а не translateX https://jsfiddle.net/wy8szudc/. Но почему это сработало?

Comments

[Антон Литвиненко]

у меня на многих проектах так, не вижу в этом проблемы

[r_g_b_a]

Выглядит, как недоработка. Уменьшаем ширину сайта и внезапно ниоткуда появляется мобильное меню, которое плавно уезжает за пределы экрана.

[Антон Литвиненко]

r_g_b_a, да никто никогда не ресайзит окно. Максимум смена ориентации, что тоже настолько редкое явление, что этим можно пренебречь

Answer 1

[Воващ]

@media (max-width: 768px) {
  div {
    transition: transform 0;
    position: static;
    height: 50px;
  }
}
}

Comments

[r_g_b_a]

с переключением display: none не будет работать transition

[Воващ]

r_g_b_a, поправил ответ
сохраняем возможность тогла, но убираем время анимации

@media (max-width: 768px) {
  div {
    transition: transform 0;
    position: static;
    height: 50px;
  }
}

Answer 2

[profesor08]

Раз надо только при нажатии, тогда убирай все css транзиции и используй Web Animations API