В современных веб-приложениях ключевое значение имеет создание удобного пользовательского интерфейса. Давайте посмотрим, как создать этот опыт при работе с выцветшим текстом.
Цель этой статьи состоит в том, чтобы к концу вы смогли добавить затухание к текстовому отображению в вашем приложении 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.
Удачи и счастливого кодирования!