Анимация элементов?

Question

[Артем]

На сайте torex.ru
в блоке "Серия дверей" при наведении на блоки они плавно разьезжаются.
Перевариваю логику.
Как сделать, чтобы элементы не выезжали за границы блока, а сужались?

Наводим на блок
Определяем предыдущие элементы и следующие. Какую формулу заложить, чтобы они уменьшались по ширине в пропорции.

Answer 1

[Андрей Пике]

А что не понятно?
Элементы (каждая из дверей) наложены друг на друга с соответствующим z-index.
При наведении срабатывает типа transform: translate3d(48px, 0px, 0px); => transform: translate3d(92px, 0px, 0px);

Они тут вообще не сужаются, а просто перекрывают друг друга.
Смещение идёт только по горизонтали.

Ничто никуда не вылезает, т.к. у родителя overflow: hidden;.
Координаты сначала вычисляются по умолчанию, потом меняются по hover.

Comments

[Артем]

Они не вылезают не из-за того, что у родителя overflow: hidden;., а потому что определяется направление открытия.

Если мы слева направо наводим на блоки, то они раскрываются в одну сторону, справа налево - вдругую. Вот до этого я и не могу допереть.
Надо ли определять последующие и предыдущие элементы относительно класса active

[Артем]

В общем вот https://jsfiddle.net/zzrn9kjr/13/
при наведении я проверяю, содержит ли блок класс before или after и в зависимости от этого проверяю куда двигать.
Посмотрите, пожалуйста, может как-то можно улучшить код.

[Артем]

конечно мне кажется что на 23 строке js не самый лучший вариант подгона координат следующего блока

[Андрей Пике]

Я бы сделал по-простому - ловил бы в hover id, сохраняя prev_id. По знаку разницы вычислять направление движения.
Id, понятное, как-то должны быть упорядочены слева на право.