基础-Motion UI

---

Foundation 提供了用于创建 UI 过渡和动画的 Motion UI 库，并由Toggler、Reveal和Orbit等 Foundation 组件使用。

安装运动用户界面

您可以使用 npm 或 Bower 在项目中安装 Motion UI 库，如以下代码行所示 -

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

您可以使用config.rb在Compass中添加 Motion UI 库的路径，如以下代码行所示 -

add_import_path 'node_modules/motion-ui/src'

您可以使用以下代码行将路径包含在gulp-sass中 -

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

使用以下代码在 SASS 文件中导入 Motion UI 库 -

@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 动画。单击此链接可使用数据动画类检查动画如何在模态上工作。