Простейший анимированный «спойлер» на чистом JavaScript!

Привет, мои дорогие. Сейчас мы сделаем очень простой и полнофункциональный спойлер, раскрывающийся плавно, с анимацией, с одной строкой CSS и одной строкой JS. Безо всякий тяжеловесных JQuery!

Что именно делаем? Вот такую фишку:

23-02-2014_16-38-00

То есть имеется некий скрытый текст, который нужно открыть, нажимая по кнопке.

Говоря более техническим языком, изменяем с помощью JavaScript высоту скрытого блока и плавно убираем div с кнопкой. Плавность достигается с помощью CSS3-анимации. Никакие JQyery и MooTools не используются. Не мучайте народ, делайте легкие, удобные и красивые скрипты на чистом CSS3 и JavaScript. Кода там — по одной строчке:

JavaScript:

CSS:

HTML:

Всё просто, меньше килобайта кода. Это вам не мучать пользователя различными JQuery!

P.S. Так же в данном примере исправлен косяк с невозможностью плавной смены height через transform от 0 либо какого-то значения до auto!

Круто ведь кодить на чистом JS?
Конечно, лёгкий код рулитАга, скоро на ассемблере будем кодить

Оцените статью!

Понравилась статья? Поделиться с друзьями:
Комментариев: 1
  1. Sparco

    оу. это очень удобно. значительно всё упрощает

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Для отправки сообщения выберите лишнее изображение