Автор оригинала: LAU TIAM KOK.
Вступление
Много лет назад, если вы хотите создать док-станцию MacOS с подпрыгивающим эффектом для вашей веб-страницы, это была большая проблема, и вам понадобится JavaScript, чтобы помочь вам сделать это. Сегодня мы можем достичь этого с чистыми CSS, как кусок пирога.
CSS «Переход» и «Flex»
Есть два варианта, которые вы можете сделать это, но Переход
это то, что вы в основном нужно:
- Использование
Переход
С системой сетки от Фонда Zurb Zurb и небольшая помощь от JavaScript или без. - Используя только
Переход
сFlex
без ничего другого.
Опция 1
Основной HTML, который вам нужен:
И в основном это то, что вам нужно иметь в ваших CSS (я использую меньше):
.cell-item { -webkit-transition: width 1s ease; -moz-transition: width 1s ease; transition: width 1s ease; }
И в вашем JavaScript зависит от того, какое событие вам нужно, либо событие «Hover», либо «Click» (я использую «» для моего примера):
$('.cell-item a').on('click', function(event) { event.preventDefault() var $this = $(this) var parent = $this.closest('.cell') var context = $this.closest('.row') parent.addClass('large-6 active').removeClass('large-3') parent.siblings('.cell').addClass('large-2').removeClass('large-3 large-6 active') context.siblings('.row-scale').find('.cell').addClass('large-3').removeClass('large-2 large-6 active') })
Идея состоит в том, чтобы поменяться вокруг Большой-3
, Большой-6
и Большой-2
Отказ Когда вам нужно клетки
Усаживаться, вы добавляете Большой-2
и удалить Большой-3
Отказ Когда вам нужно клетки
Чтобы увеличить, вы добавляете Большой-6
и удалить Большой-3
Отказ CSS Переход
сделаю остаток работы для вас.
Вариант 2.
Основной HTML, который вам нужен:
CSS (меньше) вам нужно:
.flex-items { display: flex; flex-direction: row; } .flex-item { -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; transition: all 2s ease; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; &:hover { -webkit-box-flex: 4; -ms-flex-positive: 4; flex-grow: 4; } }
Вы просто используете Flex: 1
начать с, и поменяйте его с Flex-рост: 4
или любое число, когда вам нужен Flex-item
увеличивать, когда вы Hover Это. Опять же, Переход
сделаю все остальное для вас.
Заключение
Там вы идете, теперь у вас есть эффект «волны» так же просто, как это. Вы можете Скачать или Смотри Как это работает с моего репозитория GitHub. Дайте мне знать, что вы думаете. Любые улучшения или предложения, просто оставьте мне комментарий ниже.