Foundation Motion UI
Foundation 提供用于创建 UI 转换和动画的 Motion UI 库，并由
Toggler、
Reveal 和
Orbit 等 Foundation 组件使用。
安装 Motion UI
您可以使用 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 库-
内置过渡
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 动画。单击此链接以检查动画如何使用
数据动画类在模态上工作。
