Основа - Motion UI

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

Установка Motion UI

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

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

Вы можете добавить путь для библиотеки Motion UI в 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 UI. Давайте создадим один простой пример, используя эффекты перехода.

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

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

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

Анимация

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