Как реализовать анимацию описанную ниже?

Question

[Urushi Go]

Нужно, чтобы элементы, которые находятся внутри блока, скрывались при уменьшении размера этого блока.

cuberto.com - на этом сайте, при наведении на бургер, текст появляется внутри границ меню

Решение - overflow: hidden

Comments

[Александр Тягунов]

Вы имеете ввиду уменьшение экрана? Что вы понимаете под уменьшение размера блока?

[Urushi Go]

Александр Тягунов: изменении width & height. Изменение размера экрана здесь не при чем

Answer 1

[Дмитрий Кравченко]

Зависит от того, что вызывает изменение размеров. Если это брейкпоинт в медиа запросах, напишите соответствующие правила анимации для нужных элементов, если это вызывается работой скриптов - зависит от логики, можно, допустим, проверять размеры, и при достижении нужной величины добавлять какой-то класс на элемент, к которому привязать необходимые анимации.
Если этого недостаточно, опишите ситуацию подробней.

Comments

[Urushi Go]

Допустим есть блок, а внутри него текст. если размер блока уменьшать, то текст скрывается на столько, на сколько он не помещается в блоке

[Urushi Go]

cuberto.com - на этом сайте при наведении на бургер текст появляется внутри границ меню

[Дмитрий Кравченко]

если речь о тексте, то нужно смотреть в сторону свойств overflow: hidden;text-overflow:ellipsis; и, возможно, white-space: nowrap; codepen.io/martinwolf/pen/qlFdp - тут хороший пример

[Дмитрий Кравченко]

Urushi Go: на куберто это реальзовано через overflow: hidden контейнера меню и transition: left .2s linear .1s на каждом элементе меню

[Urushi Go]

Дмитрий Кравченко: огромное спасибо за помощь :-)