Как сделать ховер появления элемента с css-анимацией без использования св-ва position?

Question

[Дима]

Есть 2 блока, один скрытый другой нет. При наведении на скрытый, появляется обычный блок. Нужно сделать это появление с анимацией transition: all ease 0.5s. Если свойство display: block на ховер, то анимации не происходит. Если сделать через position (песочница) и в исходном положении сделать, к примеруright: -1000px, а при наведении на скрытую область right: 0, то приходится использовать overflow-x: hidden, чего очень не хочется делать. Какие есть варианты? Желательно без подгрузки сторонних css-файлов

Answer 1

[Lam Besis]

Чтобы просто поправить косяк с overflow, достаточно исправить одну строчку:

.right{
	position: fixed;
}

Но вообще у вас сама верстка не совсем правильная: position'ы не очень логично прописаны, ширина/высота блоков тоже. Вот чуть отредактированный pen.

Comments

[Дима]

Большое спасибо! Как-то не подумал про fixed, буду знать :)

[Lam Besis]

Дима Волков, не за что, обращайтесь )
Ещё пара советов, если не возражаете: в подобных задачах старайтесь использовать относительные величины, у варианта “right: -1000px” в последствии может вылезти гораздо больше неожиданных сюрпризов, чем у “right: -100%” :)
А в идеале подобную позиционку вообще лучше делать через “transform”, т.к во время анимации через свойства position перерисовывается пол-страницы, а если анимировать transform, то перерисовывается только нужный объект.
И не стоит использовать float (кроме тех моментов когда нужно действительно задать обтекание), тем более что это свойство в связке с position все равно игнорируется :)
Удачных изысканий)

[Дима]

Спасибо за советы, много не знал. А float я забрал со старого кода, там еще не думал про ховер :)

[Дима]

Lam Besis, а если содержимое сайдбара не влазит на один экран, что посоветуйте сделать? Ведь с position: fixed его нельзя проскроллить.

[Lam Besis]

Дима Волков, не влезает по высоте или по ширине? Если на codepen закинете будет проще)

[Дима]

Lam Besis, по высоте :)

[Lam Besis]

Дима Волков,

.sidebar {
   height: 100%;
   overflow-y: scroll;
}

Но в идеале конечно заставить контент помещаться, а то не очень юзер-френдли получается.