Как запустить несколько переходов CSS одновременно |

Ниже приводится выдержка из CSS Animation: Интерактивное руководство Вики Мерли.

В этой книге вы видели несколько примеров анимирования одного свойства CSS. Но для создания более сложных эффектов вам может понадобиться анимировать более одного свойства одновременно. В предыдущем разделе было показано несколько способов определения переходов для нескольких свойств CSS для одного и того же элемента. Например:

Или, если вы предпочитаете использовать свойства длинной формы:

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

Это работает, но есть лучший подход, когда вам нужно инициировать переходы для нескольких свойств одного и того же элемента. Во-первых, инкапсулируйте свойства CSS, которые переходят в класс CSS. Затем, когда вы хотите инициировать переход, добавьте или удалите этот класс из элемента, используя classList. classList — это свойство элемента DOM, которое возвращает список токенов атрибута класса элемента. Кроме того, classList имеет четыре метода, которые упрощают процесс добавления, удаления, переключения и проверки существования класса в элементе:

element.classList.add ( ‘имя класса’)
Добавьте этот класс к элементу, если у элемента его еще нет.
element.classList.remove ( ‘имя класса’)
Удалить этот класс из элемента.
element.classList.toggle ( ‘имя класса’)
Если элемент имеет класс, удалите его, в противном случае добавьте его.
element.classList.contains ( ‘имя класса’)
Возвращает true или false в зависимости от того, содержит ли класс элементный класс.

Давайте рассмотрим пример использования classList для запуска CSS-переходов сразу по нескольким свойствам. В этом примере текст HELLO WORLD поднимается вверх с позиции чуть ниже середины страницы, переходя от прозрачного к непрозрачному. Попробуйте это на CodePen, прежде чем переходить к коду.

Прочтите: Как заменить вибратор в сборе в iPhone 4S |

Элемент HTML — это просто некоторый текст внутри
с применением двух классов CSS:

Класс hello стилирует и центрирует текст, а также определяет переходы для свойств transform и opacity. Скрытый класс делает Hello World
прозрачный и перемещает его вниз:

Используя одну или две строки JavaScript, вы можете запустить переход, удалив скрытый класс из элемента. В этом случае переход запускается при загрузке страницы:

Это действительно все, что нужно сделать. Так же просто создать анимацию перехода, которая перемещает текст на экране и за его пределы — просто используйте toggleClass вместо removeClass. Когда скрытый класс удаляется, HELLO WORLD движется вверх и становится видимым, а когда скрытый добавляется, он движется вниз и становится прозрачным:

Этот пример на CodePen показывает приведенный выше код в действии. Вы можете нажать или щелкнуть в любом месте основного фонового изображения, чтобы переключить скрытый класс. Попробуйте нажать или щелкнуть, когда HELLO WORLD находится в середине перехода, и обратите внимание, как текст немедленно меняет направление.

Обратите внимание, что CSS для элемента hello не изменился — определение переходов для transform и opacity для этого элемента приводит к анимированию этих свойств при любом их изменении. Вы узнаете больше об определении различного поведения для «прямого» и «обратного» направлений перехода позже в этом разделе.

Более того, получите сегодня свою копию CSS Animation: Интерактивное руководство Вики Мерли на iPad или Mac уже сегодня!

$ 7.99 — Скачать сейчас

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