Slide Up или Slide Down без jQuery, используя только CSS

Slide Up или Slide Down без jQuery, используя только CSS

· HTML & CSS и jQuery и JavaScript · 2 мин чтения

Раньше, чтобы сделать анимацию нам бы потребовалась какая-нибудь библиотека, например jQuery, сегодня у нас есть CSS. В целом, и про него тоже можно забыть, потому что существует такое решение как Animate.css. В этой записи я покажу как сделать методы slideDown() и slideUp() из jQuery с помощью обычного CSS (не используя библиотеки и сторонние методы).

Демо

Ниже вы можете посмотреть демо, которое показывает как будет выглядить анимация, если вы будите следовать инструкциям в этой записи.

Нажмите на красный квадрат, чтобы он изменил высоту.

See the Pen NjEEKO by Alexander (@bologer) on CodePen.21516

Инструкция по создания и описание демо

У нас есть простой HTML с div элементом, у которого есть класс .slider.

<div class="slider">Что-то внутри...</div>

Далее нам нужно добавить CSS стили, которые сделают анимацию на этом элементе.

Ниже в стилях есть три свойства, которые могут быть непонятными для многих, поэтому я их подробнее описал ниже:

  • transition-property — выбор анимаций, к которым будет относиться ниже прописанные свойства
  • transition-duration — длинная анимации
  • transition-timing-function — выбор типа анимации, в данном случае используется cubic-bezier()
.slider {
  overflow-y: hidden;
  height: 200px;
  width: 200px;
  background-color: red;
  cursor: pointer;
  transition-property: all;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.slider.slider-closed {
  height: 50px;
}

Для визуального эффекта я сделал красный куб 200 на 200 пикселей и с помощью класса-помощника — .slider-closed мы будем изменять ему высоту. Изначально у .slider стоит высота 200, .slider-closed меняет её на 50.

Смена высоты происходит с добавлением класса к .slider элементу с jQuery используя метод toggleClass().

Метод toggleClass() убирает класс, если он уже есть у элемента и добавляет если его нет.

$('.slider').on('click', function() {
  $(this).toggleClass('slider-closed');
});

Не хочется подключить jQuery ради двух строчек кода? Тогда воспользуйтесь JavaScript вариантом ниже:

document.getElementById('button').onclick = function(){
     document.getElementsByClassName('slider')[0].classList.toggle("slider-closed");
}

А что вы используете для создания анимации на сайте? jQuery? CSS библиотеки или что-то другое?

Комментарии