Задать вопрос
mannaro
@mannaro
Умею профессионально гуглить

Плавная смена объектов на чистом CSS?

Привет! Помогите, пожалуйста, реализовать такой функционал: при клике на "Далее" старая пара должна уезжать вправо (с уменьшением opacity), а новая пара должна приезжать слева (с увеличение opacity). Сложность в том, что сделать это нужно с минимальным вмешательством в JS (точнее, мы можем добавить какой-то класс в момент нажатия "далее" и все. Убирать класс через Х секунд нельзя).

Гуру CSS, мне нужна ваша помощь!

P.S: поддержка сатрых браузеров не нужна. У них может пара меняться "резко".
P.P.S: крутил keyframes, но так и не смог осилить (так как ширина не фиксированная, а position:absolute сбрасывает ширину от margin:auto до width:auto).
P.P.S: песочница - https://jsfiddle.net/3qpnvvun/
P.P.P.S: после того, как старая пара уехала она должна стать некликабельной (в идеале display:none).
P.P.P.P.S: если это реализовать архисложно, то напишите об этом, пожалуйста.
  • Вопрос задан
  • 1062 просмотра
Подписаться 1 Оценить Комментировать
Решения вопроса 1
mannaro
@mannaro Автор вопроса, куратор тега JavaScript
Умею профессионально гуглить
Спасибо всем.
В вопросе я не уточнил, что юзаю React (а зря). Проблему помогла решить либа rc-animate.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
abyrkov
@abyrkov
JavaScripter
jQuery в помощь. На чистом CSS нельзя, да и непрактично
Ответ написан
iscareal
@iscareal
Front-End Developer
Я вижу так:
1. Располагаете элементы в каком то блоке абсолютно. Этому блоку задаете высоту первого видимого таба.
2. При клике на Далее добавляете класс к текущему табу, который CSS анимацией (keyframes) уберет его и к следующему, который сделает его видимым.
3. Перед анимацией считаете высоту его контента и ставите ее блоку с табами. Она может меняться плавно, если добавить transition на height.

Чтобы не фигачить свои анимашки, можно заюзать https://daneden.github.io/animate.css/
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы