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

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

Предпосылки

Вам нужно будет установить git и node с npm на свой компьютер. Эффект также был разработан в последней версии Chrome.

Во-первых: настроить проект

Эта статья является продолжением бесценной статьи, в которой мы рассмотрели создание текстовой кнопки «Больше/Меньше». Мы начнем с того места, на котором остановилась эта статья, с простого тумблера для расширения и свертывания, но без дополнительных стилей для эффекта выцветшего текста. Вы можете извлечь репозиторий из этой статьи по тегу v1.0.0 с помощью этой команды:

git clone -b v1.0.0  https://github.com/cameronDz/more-less-medium-app.git

Другой вариант, который вы можете сделать, это использовать create-react-app для создания нового проекта и использовать следующие два раздела в качестве файлов App.js и index.css.

Как только вы либо вытащите приложение, либо добавите приведенный выше код в сгенерированное приложение, вы можете запустить npm install и npm run start, чтобы приложение заработало. Функциональность будет, как описано, очень простой кнопкой развертывания и свертывания с некоторым текстом Lorem Ipsen.

Далее: Добавить затухание

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

Настройка классов

Первый шаг — установка классов, определяющих, когда текст расширяется или сворачивается. Сделать это было простой тройкой в ​​className оболочки div для текста, используя строковый литерал. В настоящее время у нас есть следующее в оболочке div.

И добавление изменения будет тройным с флагом isExpanded, который, когда он равен true, мы добавим класс .expanded, а когда false, мы добавим класс .collapsed. Это будет выглядеть примерно так, как этот фрагмент.

Увядшие атрибуты CSS

Теперь мы можем перейти к таблице стилей и добавить новые стили на основе этих двух классов.

Установка атрибута mark-image (docs) применяет изображение, определенное в ключе, поверх элемента. Любой текст в элементе покажет изображение. Функция linear-gradient() (docs) формирует изображение на основе аргументов.

В классе .collapsed black 50%, transparent говорит создать изображение, которое находится на расстоянии black от верхней части элемента до 50% вниз, а затем создать градиент от черного до прозрачного для остальной части изображения. Это дает «выцветший» вид, когда текст свернут.

В классе .expanded black 100%, transparent говорит о создании изображения, которое составляет black всю высоту элемента.

Запустив приложение, у вас должно появиться сворачиваемое текстовое поле с небольшим затемнением внизу, как показано ниже.

Наконец: сгладьте переход

Выцветший текст хорош, но вы можете видеть выше .gif, что выцветание появляется и исчезает, когда вы расширяете и сворачиваете текст. Вы можете сгладить transition еще несколькими строками CSS.

Использование ключевых кадров

Здесь нам просто нужно добавить два атрибута CSS @keyframes (docs), когда текст расширяется и сворачивается. Это фрагмент кода, который мы добавим в нашу таблицу стилей.

@keyframes определяют, как работает анимация. Чтобы использовать анимацию, мы должны указать на @keyframes в классах, в которых мы хотим иметь анимацию.

Для mask-collapsing мы хотим, чтобы анимация работала именно так, когда текст схлопывается. Маска начнется со 100% и перейдет к значению 50%, которое уже определено в классе, где мы хотим, чтобы линейный градиент начинался. Это создаст видимость медленного появления затухания, а не быстрого появления сразу после нажатия кнопки.

В mask-expanding мы определяем, как работает анимация, когда мы расширяем текст. Мы медленно увеличиваем 50% начала черной секции до 100%, что заставит исчезновение выглядеть так, как будто оно медленно исчезает, а не сразу удаляется.

Добавление анимации

Теперь нам просто нужно применить атрибут animation к классам. Добавьте animation: mask-collapsing; к классу .collapsed и animation: mask-expanding; к классу .expanded. Мы также добавляем время, необходимое для анимации. Мы сопоставляем transition скорость текста на 0.5s.

Когда мы смотрим на наше работающее приложение, мы видим, что

Теперь затенение не так сильно всплывает, когда вы разворачиваете/сворачиваете, а переход становится плавным, когда вы показываете больше текста.

Заключение

Вот и все, надеюсь, вы изучили несколько новых CSS-инструментов для своего инструментария и сможете добавлять затухание к любому расширяющемуся/сворачивающемуся тексту. Окончательный код можно найти под тегом v1.1.0, который хранится здесь, на GitHub.

Удачи и счастливого кодирования!