Как сделать плавное появление блока css

Добавил пользователь Дмитрий К.
Обновлено: 05.10.2024

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

Устанавливать свойство display: none нельзя потому, что тогда перестанет работать анимация . В этом случае поможет смена значения у свойства visibility . Его, на ряду с другими свойствами, указываем в transition.

PS: Разумеется, названия CSS3 свойств transition и transition-delay нужно указывать с браузерными префиксами.

Ещё заметки со схожей тематикой

Коментарии к заметке

@mista_k если я правильно понял задачу то тут поможет так же pointer-events: none; но кроссбраузерности будет конечно меньше.
— CyberAP (@CyberAP) January 7, 2014

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

В стили добавил два правила:

Спасибо за пример. Он, разумеется, проще и надёжнее, но имеет совсем другое поведение.

Мерцание можно убрать с css -webkit-backface-visibility: hidden;

Данный пример использовал для открытия подпунктов меню. Нормально работает

Vue предоставляет несколько способов для анимации эффектов переходов при добавлении элементов в DOM, обновлении или удалении из него. Эти возможности позволяют:

автоматически применять CSS-классы для переходов и анимаций
интегрировать сторонние библиотеки CSS-анимаций, такие как Animate.css

В этом разделе рассматриваются только анимации переходов появления и исчезновения элементов. В следующих — анимация списков и анимация переходов между состояниями.

Vue предоставляет компонент-обёртку , позволяющий добавить анимации появления/исчезновения для любого элемента или компонента для следующих случаев:

Условная отрисовка (с использованием v-if )
Условное отображение (с использованием v-show )
Динамические компоненты
Корневые элементы компонента

Посмотрим на небольшой пример в действии:

Когда элемент, обёрнутый в компонент , будет добавляться или удаляться, произойдут следующие действия:

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

Если на компоненте есть JavaScript-хуки, то в соответствующие моменты времени они будут вызваны.

Если CSS-переходов или анимаций не обнаружено и нет JavaScript-хуков, DOM-операции для вставки и/или удаления будут вызваны незамедлительно или в следующем фрейме (примечание: это фрейм анимации браузера, отличный от концепции nextTick во Vue).

Существует шесть классов для анимаций переходов появления и исчезновения элементов.

v-enter-from : Означает начало анимации появления элемента. Этот класс добавляется перед вставкой элемента, а удаляется в следующем фрейме после вставки.

v-enter-active : Означает активное состояние анимации появления элемента. Этот класс остаётся на элементе в течение всей анимации появления. Он добавляется перед вставкой элемента, а удаляется после завершения перехода или анимации. Этот класс можно использовать для установки длительности, задержки или функции плавности (easing curve) анимации появления.

v-enter-to : Означает завершение анимации появления элемента. Добавляется в следующем фрейме после вставки элемента (тогда же удаляется v-enter-from ), а удаляется после завершения перехода или анимации.

v-leave-from : Означает начало анимации исчезновения элемента. Добавляется сразу после вызова анимации исчезновения, а удаляется в следующем фрейме после этого.

v-leave-active : Означает активное состояние анимации исчезновения. Этот класс остаётся на элементе в течение всей анимации исчезновения. Он добавляется при вызове анимации исчезновения, а удаляется после завершения перехода или анимации. Этот класс можно использовать для установки длительности, задержки или функции плавности (easing curve) анимации исчезновения.

v-leave-to : Означает завершение анимации исчезновения элемента. Добавляется в следующем фрейме после вызова анимации исчезновения (тогда же удаляется v-leave-from ), а удаляется после завершения перехода или анимации.

Каждый класс имеет префикс с именем перехода. По умолчанию будет префикс v- , если в не указан атрибут name . Например, для вместо класса v-enter-from будет применяться super-enter-from .

Классы v-enter-active и v-leave-active позволяют определить кривые плавности для переходов появления и исчезновения элемента. Пример использования рассмотрим ниже.

Как привлечь внимание пользователя к важной информации на вашем сайте? Как быть уверенным в том, что при прокрутке страницы сайта пользователь не упустит главного из виду? Ответ прост: сделайте появление блока заметным – добавьте CSS3 эффект.
В этом посте мы разберем применение библиотеки CSS3 эффектов. Будем добавлять к текстовым блокам, к которым пользователь доскролил мышкой, эффекты появления.

1. Скачиваем библиотеку

На этом сайте вы можете посмотреть все имеющиеся CSS3 эффекты в действии и скачать css файл с их свойствами к себе в проект.

добавляем к себе в проект:

2. Разбираем HTML структуру демо-примера

В нашем примере, на сайте будет основное меню, элементы которого будут ссылаться на текстовые блоки текущей страницы.
Чтобы при нажатии по ссылке мы переходили к определенному блоку, абзацу, необходимо в атрибут href прописать имя идентификатора того блока на который мы хотим сослаться, например:
у нас есть блока

, внутренняя ссылка на этот блок будет иметь следующий вид:
Таким образом все ссылки ссылаются на ID блоков.
Вот и сам код меню из демо-примера:

Каждая ссылка ссылается на соответствующий блок:

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

3. Разбираем jQuery подход к добавлению эффектов

Начнем с первого блока в котором 9 статей. Ему мы добавим класс zoomIn эффекта сразу после загрузки.

Таким образом мы каждой статье первого блока добавили класс анимации – animated и класс того эффекта, который хотим наложить на блок при загрузки страницы, в нашем случае zoomIn.

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

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

Вот та часть кода которая отвечает за отслеживание достигли или нет мы верхнего края блока:

После того как мы достигли нашего блока с двумя статьями каждой нужно дать свой класс, делаем это следующим образом:

С помощью .eq(i) мы выбираем элемент выборки, где i – номер элемента в выборке jQuery и нумерация начинается с нуля.

Для того чтобы все элементы возвращались в исходную позицию после эффектного появления, я добавил условие, если пользователь вернулся в начало страницы, то все блоки с текстами (которые уже не видны) спрятать и удалить у них классы с эффектами, вот такой код получился:

Вот весь скрипт который обрабатывает демо-пример:

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

Если вам понадобится помощь в реализации эффектов, пишите комментарии к статье – помогу 😉

Есть некий объект со свойством display: none . Нужно анимировать его появление, при изменении параметра display , например, на block .

Пример

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

Проблема

Стандартный способ анимации через transition не работает. Но это и не удивительно:

Но даже через введение параметра opacity ничего не работает:

Решение

Будем использовать @keyframes :

Решение с обратной анимацией

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

Если добавим в HTML первый класс is visible , то вначале элемент будет видимым, а потом переключаться с видимого на невидимый:

CSS transitions

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

При наведении курсора на квадрат плавно изменяется цвет фона.

Теперь подробнее рассмотрим, как управлять переходами в CSS. У нас на вооружении есть всего 5 свойств, которые позволяют контролировать transition-анимацию:

transition-property;
transition-duration;
transition-timing-function;
transition-delay;
transition;

transition-property — указывает список свойств, которые будут анимироваться; свойства, которые здесь не указаны, будут изменяться обычным образом. Можно анимировать все свойства для конкретного элемента, указав значение all. Если вы не указали ни одного свойства, то по умолчанию используется значение all.

transition-duration — задаёт значение продолжительности анимации, время можно указывать в секундах или миллисекундах.

transition-timing-function — временная функция, указывает точки ускорения и замедления за определенный период времени для контроля изменения скорости анимации. Проще говоря, с помощью этого свойства можно указать поведение для анимации. Например, мы можем ускорить анимацию в начале и замедлить в конце, либо наоборот. Для того, чтобы задать процесс анимации используются кривые Безье. Вообще, transition-timing-function позволяет сделать очень много разных поведений для анимаций, это целая тема для статьи, поэтому здесь мы не будем углубляться.

transition-delay — задаёт задержку времени до начала анимации, можно указывать в секундах или миллисекундах.

transition — это общее свойство, которое позволяет перечислить первые четыре свойства в порядке: property, duration, timing-function, delay.

У нас получилась вот такая простая анимация: при наведении мышкой на квадрат изменяется ширина; продолжительность анимации одна секунда; анимация воспроизводится по линейной функции; задержка перед началом анимации 500 миллисекунд.

С помощью CSS transitions можно анимировать почти все свойства и создавать много интересных, красивых, функциональных и даже сложных анимаций, которые будут дополнять и улучшать ваш проект. Например, я сделал вот такой Material-FAB на чистом CSS, используя transitions:

CSS animations

CSS animations позволяют делать более сложные анимации, нежели CSS transitions. Весь секрет в @keyframes. Правило @keyframes позволяет создавать анимацию с помощью набора ключевых кадров, то есть описывает состояние объекта в определенный момент времени. Давайте рассмотрим простой пример.

Наш круг ожил и он как будто пульсирует.

Есть 9 свойств, которые позволяют контролировать CSS animations:

animation-name;
animation-duration;
animation-timing-function;
animation-delay;
animation-iteration-count;
animation-direction;
animation-play-state;
animation-fill-mode;
animation;

animation-name — здесь указвается имя анимации, которое связывает правило @keyframes с селектором.

animation-iteration-count — задаёт количество повторов анимации, значение по умолчанию 1. Значение infinite означает, что анимация будет проигрываться бесконечно.

animation-direction — задаёт направление анимации.

animation-play-state — данное свойство управляет остановкой и прогрыванием анимации. Есть два значения, running (анимация проигрывается, по умолчанию) и paused (останавливает анимацию).

animation-fill-mode — устанавливает, какие CSS-свойства будут приминены к объекту до или после анимации. Может принимать такие значения:

none — анимируемые CSS-свойства применятся к объекту только во время воспроизведения анимации, по окончании объект возвращается в исходное состояние;
forwards — анимируемые CSS-свойства применятся к объекту по окончании воспроизведения анимации;
backwards — анимируемые CSS-свойства применятся к объекту до начала воспроизведения анимации;
both — анимируемые CSS-свойства применятся к объекту и до начала, и после окончания воспроизведения анимации;

Свойства animation-duration, animation-timing-function, animation-delay работают так же, как аналогичные свойства в CSS transitions, о которых я писал раньше, поэтому не буду повторяться.

С помощью animations CSS можно создавать довольно сложные анимации без использования JavaScript. Яркий пример — это лоадеры, то есть элементы, которые показывают, что на вашей страничке что-то загружается. Вот несколько примеров:

Motion Path Module

Motion Path Module CSS позволяет создавать движение объектов по контуру через специальное свойство motion-path. Раньше такую анимацию можно было сделать только с помощью SVG или сложных скриптов.

В этой спецификаии есть 3 свойства:

motion-path;
motion-offset;
motion-rotation;

motion-path — это свойство позволяет указать точки(координаты) по которым будет двигаться объект. Синтаксис такой же как у SVG-атрибута path.

motion-offset — это свойство приводит объект в движение от начальной точки до конечной. Оно принимает либо двойное значение длины, либо проценты. Чтобы объект начал двигаться, нужно определить анимацию, которая будет идти от 0 до 100%.

motion-rotation — это свойство позволяет указать, какой стороной вперед будет двигаться объект. Можно указать auto, reverse или свое значение в градусах ('-45deg', '30deg' и т.д).

К сожалению, motion-path пока что поддержывается только в Chrome и Opera, но будем надеяться, что остальные браузеры в скором времени возьмут с них пример, ведь штука действительно полезная.

Для тех, кто ещё не понял, как это работает, или хочет лучше с этим разобраться, я сделал пример (ссылка на codeopen).

Читайте также: