Рубрики
Без рубрики

Bootstrap 5 анимации

Что такое анимация начальной загрузки? Bootstrap тонкая и гладкая анимация MDB предоставляет пользователю … Tagged с Bootstrap, JavaScript, WebDev, HTML.

Что такое анимация начальной загрузки?

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

Установка

Ручная установка (ZIP -пакет)

Чтобы использовать этот компонент, вам сначала нужно установить MDB 5 бесплатный пакет

MDB CLI

Смотрите наш Quick Start Tutorial Чтобы обнаружить и использовать весь потенциал MDB 5 и MDB CLI

Npm

Предварительные условия

Перед началом проекта обязательно установите Node LTS (12.x.x рекомендуется) .

Установка

Чтобы установить набор пользовательского интерфейса MDB в ваш проект, легко введите следующую команду в терминале:

npm i mdb-ui-kit
Импорт модулей JS

Вы можете импортировать всю библиотеку или просто отдельные модули:

import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module
Импорт файла CSS

Для импорта таблицы стилей MDB, пожалуйста, используйте следующий синтаксис:

@import '~mdb-ui-kit/css/mdb.min.css';
Импорт модулей SCSS

Вы также можете импортировать отдельные модули SCSS. Чтобы сделать это правильно, мы рекомендуем скопировать их из местоположения Node_Modules/MDB-UI-KIT/SRC/SCSS непосредственно в ваш проект и импортировать так же, как файлы CSS.

Интеграция WebPack

Вы можете значительно ускорить процесс создания нового проекта на основе WebPack, используя наш Стартер Анкет

CDN

Установка через CDN является одним из самых простых методов интеграции набора пользовательского интерфейса MDB с вашим проектом. Просто скопируйте последний скомпилированный тег сценария JS и тег ссылки CSS из cdnjs к приложению.

Не забудьте добавить также шрифт Awesome и Roboto Font, если вам нужно. Вот пример кода:

CSS
JS

Начиная

Самый простой способ реализации анимации-это использование данных-MDB-атрибуты. В приведенном ниже примере мы используем значок и добавить атрибуты data-mdb-toggle = "анимация" Чтобы дать ему анимацию на щелчке.

data-mdb-toggle = "анимация" является обязательным атрибутом для каждой анимации.

data-mdb-animation-reset = "true" Позволяет решить, можно ли повторить анимацию

Data-MDB-ANIMATION = "Слайд-правый" Позволяет указать, какая анимация применима к элементу. В Демо -раздел Вы можете найти доступную анимацию.

API

использование

Через класс CSS
Через атрибуты данных

Вы можете увидеть больше примеров использования на странице API 📄 Animation

Настройка

На пахни

Используйте data-mdb-animation-start = "onhover" Чтобы запустить анимацию на мыши.
Повторите анимацию на свитке

Если вы хотите запустить анимацию каждый раз, когда она достигается при прокрутке использования data-mdb-animation-on-scroll = "repeat" Анкет
Показать на загрузке

Если вы используете анимацию onscroll По умолчанию все элементы видны при загрузке страницы. Они исчезают и начинают анимировать после первого свитка. Вы можете изменить это, настроив data-mdb-animation-show-on-load = "false" Анкет Однако помните, что это может оказать негативное влияние на SEO.

Вы можете увидеть больше примеров настройки на странице документации 📄 анимации

Важные ресурсы

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

  1. Читать 📄 Учебное пособие по анимации и документация <- Начни здесь
  2. Чтобы получить максимальную отдачу от вашего проекта, вы также должны познакомиться с другими вариантами контента и стиля, связанных с анимацией. См. Раздел ниже, чтобы найти их список.
  3. Вы можете использовать предварительно назначенные элементы контента и стиля в 📥 Starter Bootstrap 5 шаблонов
  4. Шаблоны являются частью 📦 Бесплатный комплект пользовательского интерфейса для Bootstrap 5
  5. После завершения проекта вы можете опубликовать его с помощью CLI, чтобы получить 💽 Бесплатный хостинг (бета)

Связанный контент и стили опции и функции

Узнайте Bootstrap 5 за 1,5 часа

Дополнительные ресурсы

Узнайте веб -разработку с нашим Учебная дорога : 🎓 Начните учиться

Присоединяйтесь к нашему списку рассылки и получите Эксклюзивные ресурсы для разработчиков 🎁 Получите подарки

Присоединяйтесь к нашей частной группе FB для Вдохновение и опыт сообщества 👨‍👩‍👧‍👦 Попросите присоединиться

Поддержка создания пакетов с открытым исходным кодом со звездой на GitHub

Оригинал: “https://dev.to/mdbootstrap/bootstrap-5-animations-1kf0”

Читайте ещё по теме: