Css плавное исчезновение блока

Анимация от «display: block» до «display: none»

Возможно вам известно, что с помощью свойств transition и animation в CSS3 можно создавать анимацию для определенных CSS-свойств . Но есть свойства, не поддающиеся анимации. Одним из них является display .

Было бы очень полезно анимировать это свойство, но это невозможно, как мне казалось до недавнего времени (ну например, как анимировать нечисловое свойство display: table ?). Но есть обходной путь, который я покажу в данной статье.

Зачем может понадобиться анимировать свойство «display»?

Нужда в анимации свойства display может исходить от необходимости решить следующие проблемы:

• Нужно сделать плавное исчезновение объекта со страницы;
• Вы не хотите, чтобы элемент занимал место после своего исчезновения (например, нужно вызвать перестройку потока вывода после исчезновения некоторого объекта);
• Вы хотите использовать для анимации исключительно CSS, без применения сторонних библиотек.

Исходя из вышеперечисленного, изменения значения свойства opacity до нуля недостаточно, так как элемент с нулевой прозрачностью все еще будет занимать место на странице.

Давайте пошагово решим поставленную задачу.

Использование Opacity и Display

Первым делом, мы попробуем использовать оба свойства — и opacity и display . HTML-код будет таким:

CSS-код может выглядеть так:

В классе « hidden » у нас имеются значения display: none и opacity: 0 . Если мы будем подставлять данный класс с помощью jQuery, то можно использовать такой код:

var box = $('#box'); $('button').on('click', function () < box.toggleClass('hidden'); >);

Однако если мы сделаем так, то не увидим эффекта перехода, который определен в стилевом блоке .box . Получится вот что (пример в Firefox немного отличается от Chrome/IE10):

Нажмите несколько раз на кнопку « Переключение видимости » и увидите, что прямоугольник исчезает и появляется мгновенно, без перехода.

Чтобы это исправить, мы можем попробовать отделить свойство display от opacity в CSS-файле:

Теперь мы можем переключать оба класса по очереди:

var box = $('#box'); $('button').on('click', function () < box.toggleClass('visuallyhidden'); box.toggleClass('hidden'); >);

Однако данный вариант не поможет нам выполнить поставленной задачи:

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

Даже если мы скомбинируем opacity: 0 с visibility: hidden , то несмотря на присутствие анимации, элемент по-прежнему будет занимать место на странице после исчезновения, что опять же нас не устраивает.

Почему не работает?

Перед применением моего метода, я хочу пояснить, почему мы не можем решить задачу простой поочередной заменой классов.

Во-первых, если вы будете добавлять классы так, как показано в примере выше, даже при нормально работающем переходе, необходимо будет разделить секцию для удаления и замены классов (то есть, если прямоугольник начинает скрываться, то сначала нужно установить свойство display: block , а затем изменить прозрачность).

Но этот прием не работает. JavaScript выполняет строку за строкой и не ждет выполнения операций, которые запускает каждая из них. Другими словами, если вы запускаете анимацию или другое асинхронное событие в строке 1, строка 2 будет выполнена, даже если анимация еще не закончилась.

После запуска анимации свойством opacity , а ее выполнение требует определенного времени, вы не увидите процесса, потому что строка display: none выполняется тут же.

Давайте подытожим возникшие перед нами проблемы:

• Когда элемент видим, сначала запускаем анимацию прозрачности, а затем, после её окончания, применяем строку display: none ;
• Когда элемент невидим, сначала устанавливаем свойство display: block , а затем пока он еще невидим, но уже присутствует на странице, запускаем анимацию.

Возможное решение

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

CSS-код не менется (два класса hidden по-прежнему разделены), а вот код jQuery будет таким:

var box = $('#box'); $('button').on('click', function () < if (box.hasClass('hidden')) < box.removeClass('hidden'); setTimeout(function () < box.removeClass('visuallyhidden'); >, 20); > else < box.addClass('visuallyhidden'); box.one('transitionend', function(e) < box.addClass('hidden'); >); > >);

Вот что этот код делает, когда прямоугольник видим:

• Добавляет класс visuallyhidden , который запускает анимацию до полного исчезновения элемента;
• После добавления класса, добавляется обработчик с помощью jQuery -метода .one() , который ожидает возникновения события transitionend ;
• Событие transitionend наступает, когда анимация свойства opacity закончилась, и было установлено свойство display: block .

Так как мы не можем определить возникновение события transitionend для свойства display , то нужно использовать другой путь, когда прямоугольник невидим:

• Сначала мы удаляем класс hidden , устанавливаем свойство display: block , пока элемент еще визуально скрыт;
• После того, как это произошло, скрипт запускает таймер с помощью функции setTimeout() , после чего начинается анимация.

Обратите внимание, что некоторые браузеры требуют префикс для transitionend. Modernizr.prefixed() может в этом помочь.

Задержка равна 20 миллисекундам. Так как свойство display: block устанавливается мгновенно, то достаточно, чтобы элемент занял свою позицию на странице и можно запускать анимацию.

А как это сделали вы?

Как было замечено выше, возможно имеются и другие способы решения данной задачи, либо улучшения для приведенного мною решения.

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

Вадим Дворников автор-переводчик статьи « Animating from “display: block” to “display: none »

Источник

Плавный display none?

Привет!
Как лучше плавно скрыть один блок и на его месте плавно проявить другой по нажатию кнопки?
А потом через несколько секунд вернуть также плавно первый блок вместо второго?

p.s. Нашел тему на тостер, но там битые ссылки на решения.

Простой 1 комментарий

Суть : создаете классы с анимированными переходами через css. Назначаете эти классы элементу и наслаждаетесь эффектом.

Сначала анимируешь исчезновение блока, потом задаешь ему display:none;
Чтоб показать блок, делаешь все наоборот. Задаешь ему display:block, а потом анимируешь его появление.
Тут нет ничего сложного или каких-то скрытых знаний, все просто и в лоб.

вот только height родителя из-за none-block всё равно будет постоянно прыгать.
К сожалению никто пока так и не дал ответ на решениgе этой проблемы, из-за чего я и подписывался.
Пока что спасают только slideToggle slideUp slideDown в jquery

Можно сделать чтоб второй блок появлялся раньше. Или вообще не пользоваться display. А прятать блок за пределами экрана, например transform: translateX(-99999px); Тут кто во что горазд и какие задачи себе ставит. Но алгоритм действий всегда одинаковый, сначала анимация, а потом любым способом прячешь блоку куда угодно.

Источник

doctor Brain

Допустим, Вы хотя бы иногда работаете с видеоредакторами: Windows Movie Maker или Adobe Premiere Pro. В таком случае Вам хорошо известны эффекты постепенного исчезновения (fade out) или появления изображения (fade in). Можно с уверенность сказать, что эти эффекты популярны, потому что они позволяют создавать довольно приятные переходы, которые не раздражают пользователей.

Давайте поработаем над постепенным появлением и исчезновением блоков в HTML-документах.

Полагаю в этом месте Вы скажете: “Постойте. Все уже давно сделано. Одноименные функции: .fadeIn() и .fadeOut() давно существуют в библиотеке jQuery”

Но дайте закончить мысль: мы создадим эффекты постепенного появления и исчезновения блоков с помощью CSS.

Эффект появления блока (fadeIn)

Добавим в CSS-файл код, который позволит изменять состояние блока от прозрачного до полностью непрозрачного:

.fade-in < animation: fadeIn ease 10s; -webkit-animation: fadeIn ease 10s; -moz-animation: fadeIn ease 10s; -o-animation: fadeIn ease 10s; -ms-animation: fadeIn ease 10s; >@keyframes fadeIn < 0% 100% > @-moz-keyframes fadeIn < 0% 100% > @-webkit-keyframes fadeIn < 0% 100% > @-o-keyframes fadeIn < 0% 100% > @-ms-keyframes fadeIn < 0% 100% > 

Для класса .fade-in указано достаточно большое время выполнение — 10 секунд. Это значение носит демонстрационный харктер и должно быть скорректировано, в соответствии с поставленными Вами целями.

Как Вы заметили, в примере используются префиксы вендоров ( -webkit , -moz , -o , -ms ), которые позволяют нам быть уверенными, что данный эффект будет актуален и для старых версий браузеров различных производителей. По данным статистики, использование префиксов очень раздражает разработчиков. Но, в конце-концов, удобство пользователей для нас в приоритете.

Теперь скорректируем HTML-документ и присвоим класс .fade-in блоку, который выполнит функцию обертки — эффект появления будет работать для всех тегов, размещенных внутри этого блока:

Эффект исчезновения блока (fadeOut)

Чтобы сделать элемент прозрачным, добавим в CSS-файл следующий код:

.fade-out < animation: fadeOut ease 8s; -webkit-animation: fadeOut ease 8s; -moz-animation: fadeOut ease 8s; -o-animation: fadeOut ease 8s; -ms-animation: fadeOut ease 8s; >@keyframes fadeOut < 0% 100% > @-moz-keyframes fadeOut < 0% 100% > @-webkit-keyframes fadeOut < 0% 100% > @-o-keyframes fadeOut < 0% 100% > @-ms-keyframes fadeOut < 0% 100% > 

В данном случае непрозрачность блока меняется от 1 (100%) до 0 (0%), то есть элемент становится абсолютно прозрачным.

Изменения в HTML-документе соответствуют алгоритму, предложенному в первом примере:

Мы еще раз убедились, что можно создавать анимацию HTML-элементов только с помощью CSS без привлечения сторонних библиотек.

Новые публикации

JavaScript: сохраняем страницу в pdf

HTML: Полезные примеры

CSS: Ускоряем загрузку страницы

JavaScript: 5 странностей

JavaScript: конструктор сортировщиков

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.

© 2021 dr.Brain .
мир глазами веб-разработчика

Источник

Создаём CSS-анимацию без плагинов

В этой статье вы узнаете, как можно буквально за пять-десять минут создать на своем сайте интересные CSS-анимации. При этом вам не придётся прибегать к помощи различных плагинов, модулей, подключать какие-либо библиотеки, скрипты и т.д. Все, что нам будет нужно, это присвоить определенному элементу на сайте CSS-класс, а потом в файле стилей дописать несколько CSS-свойств.

Навигация по статье:

Как это работает?

В основе создания такой анимации лежит CSS-свойство animation. Благодаря которому мы можем задавать название CSS-анимации, тип, количество повторов, время и направление движения.

Так же нам понадобится правило @keyframes, внутри которого мы будем по шагам описывать начальное и конечное значение CSS-свойств анимируемого элемента, и так же можем задать его промежуточные значения для создания более плавных и интересных эффектов CSS-анимации.

Анимация плавного увеличение и исчезновение элемента

Итак, начнем с самого простого эффекта анимации, это у нас будет эффект плавного появления и исчезновения.

1. Для этого нам нужно будет добавить на свой сайт какое-либо изображение или блок с текстом, или любой другой элемент, и добавить для него определенный CSS-класс. В моем случае я добавляю для этого элемента класс animate-block.

Я не сторонник редактирования файлов темы через админку WordPress. На мой взгляд, быстрее, удобнее и безопаснее редактировать их при помощи какого-то редактора кода.

В файле стилей нашей темы, или же просто в файле стилей сайта, указываем наш CSS-класс, а далее в фигурных скобочках указываем CSS-свойство animation.

Источник