Раньше, чтобы сделать анимацию нам бы потребовалась какая-нибудь библиотека, например 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 библиотеки или что-то другое?
