Учебники

Фонд — Motion UI

Декабрь 21, 2018

Foundation предоставляет библиотеку Motion UI для создания переходов и анимации пользовательского интерфейса и используется такими компонентами Foundation, как Toggler , Reveal и Orbit .

Установка Motion UI

Вы можете установить библиотеку Motion UI в свой проект, используя npm или bower, как показано в следующей строке кода: 

$ npm install motion-ui --save-dev
bower install motion-ui --save-dev

Вы можете добавить путь к библиотеке пользовательского интерфейса Motion в Compass , используя config.rb, как показано в следующей строке кода: 

add_import_path 'node_modules/motion-ui/src'

Вы можете включить путь в gulp-sass, используя следующие строки кода: 

gulp.src('./src/scss/app.scss')
   .pipe(sass( {
      includePaths: ['node_modules/motion-ui/src']
   }));

Импортируйте библиотеку Motion UI в файл SASS, используя следующий код — 

@import 'motion-ui'

Встроенные переходы

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

Пользовательские переходы

Вы можете установить пользовательские классы перехода, используя библиотеку Motion UI. Например, мы установим пользовательские классы для перехода mui-hinge () , который вращает элемент — 

@include mui-hinge(
   $state: in,
   $from: right,
   $turn-origin: from-back,
   $duration: 0.5s,
   $timing: easeInOut
);

Анимация

Вы можете использовать эффекты перехода Motion UI для создания CSS-анимации. Нажмите на эту ссылку, чтобы проверить, как анимация работает на модале, используя класс data-animation .

39
Share: