Как сделать плавное смещение блоков при нажатии на кнопку?

Question

[Soulism]

Я владею чуть более, чем базовыми навыками HTML и CSS. Нужно реализовать на сайте плавное смещение блоков при нажатии на кнопку "далее".

Будет, условно, 10 input'ов. Один input на один экран + кнопка "далее". Нужно, чтобы при нажатии на эту кнопку прошлый блок input'а плавно смещался влево (хорошо, если бы я сам мог контролировать анимацию, ее тип и т.д.), а новый, с такой же анимацией, появлялся с правой стороны. Внизу этого действа будут кружочки, отображающие прогресс. На картинке все видно.

Как я могу это реализовать без навыков JS? Или есть какой-то скрипт, куда я могу просто подставить значения?




Спасибо за понятные ответы.

Answer 1

[Stalker_RED]

Совсем без js, наверное не обойдется.

Например так: клик по кнопке добавляет контейнеру с инпутом класс, а сдвиг за счет css transition
Пример: https://jsfiddle.net/pgawqtuz/

Comments

[Soulism]

Хм, очень любопытное решение, попробую развить. Спасибо. Есть еще какая-нибудь интересная информация по типу этой?

[Stalker_RED]

Soulism: Есть еще jQuery.animate() api.jquery.com/animate
Делает примерно то-же самое, но средствами js. С тех пор как transition поддерживается всеми браузерами он уже практически не нужен.

[Soulism]

Stalker_RED: Сейчас копаюсь в кусочке кода на jsfiddle, но не могу все же сам без знаний сделать как надо. Как сделать так, чтобы при нажатии на кнопки выскакивал следующий элемент по списку? Или несколько элементов, а прошлые убирались. Нельзя как-нибудь это автоматизировать, чтобы, допустим, следующий по расположению в коде блок с input'ами вылезал после нажатия на кнопку? Или все лишь вручную?

[Soulism]

Stalker_RED: А то если этих инпутов штук 20, то получится довольно муторно

[Stalker_RED]

Soulism: Можно что-то придумать. Например, генерировать эти инпуты на лету, при помощи js. Или создать их заранее, обернуть все в контейнер с overflow: hidden и фиксированной высотой, а тем что "уехали" убирать еще и высоту. Можно и другие способы изобрести, это первое что в голову пришло.

https://jsfiddle.net/Stalk/pgawqtuz/4/

[Soulism]

Stalker_RED: Спасибо за наводку и за то, что не ленитесь для меня строчить коды:)
Последний вопрос, думаю.
Как в этот скрипт добавить еще одну строку кода? Хочу чтобы при нажатии на кнопку сразу у двух элементов менялся класс, но что-то не выходит

var buttons = document.querySelectorAll('input[type="button"]');
[].forEach.call(buttons, function(btn){
btn.addEventListener('click', function(e){
e.target.closest('.input-group1').className = ' wrooom1'
ВОТ СЮДА ДОБАВИТЬ ТАКУЮ ЖЕ СТРОКУ, ЧТО ВЫШЕ, НО С ДРУГИМИ КЛАССАМИ. КАКИЕ ПРАВИЛА ДЛЯ JS ЕСТЬ?
})
})

[Stalker_RED]

Soulism: И конечно никто не мешает добавить побольше эффектов, менять еще и opacity, например.

[Stalker_RED]

Soulism:

e.target.closest('.input-group').className += ' wrooom'

В данном случае у события клика по кнопке "e" мы смотрим какой элемент был кликнут (e.target), затем ищется ближайший родительский блок с классом input-group, и ему меняется класс.

Вы зачем-то подописывали циферки к классам, я не могу понять зачем.
А на вопрос "КАКИЕ ПРАВИЛА ДЛЯ JS ЕСТЬ?" ответить довольно сложно. Разве что ссылки дать на справочники:
https://developer.mozilla.org/ru/docs/Web/JavaScri...
https://learn.javascript.ru/first-steps

Или я неправильно понял смысл вопроса.

[Soulism]

Stalker_RED: циферки - это я с классами игрался, ничего криминального:)
Можете написать маленький кусочек кода, который менял бы классы у двух элементов при нажатии на одну определеную кнопку? Я был бы бесконечно счастлив

[Stalker_RED]

Soulism: У двух каких элементов? Менял на одни и те-же, или на разные?

[Stalker_RED]

Soulism: В простейшем случае

document.querySelector('#elem1').className += ' foo'
document.querySelector('#elem2').className += ' bar'

[Soulism]

Stalker_RED: У двух каких-либо элементов, любых. Чтобы в скрипте можно было подставить их ID, например, и все. Менял (или добавлял, как я понял добавить это +=, а поменять просто = ) - на разные классы.

[Soulism]

Stalker_RED: круто, вроде получилось. Спасибо большое за помощь

[Stalker_RED]

Soulism: Ну вон выше я привел пример выборки по id и добавления класса.
С jQuery.addClass() и .removeClass() вы уже знакомы ведь?

[Soulism]

Stalker_RED: Разве что слегка знаком

[Soulism]

Stalker_RED: Вот чего выходит) Отличная база. Спасибо еще раз.
https://jsfiddle.net/pgawqtuz/8/

Answer 2

[Anna_BS]

Это слайдер
swiper попробуйте подстроить этот
анимацию появления css нужно будет написать

Answer 3

[Вячеслав Боргомотов]

Можно подключить и реализовать с помощью animate.css
https://daneden.github.io/animate.css/