基础 - 运动UI

Foundation提供用于创建UI过渡和动画的Motion UI库，并由Foundation组件使用，例如 Toggler ， Reveal 和 Orbit .

安装Motion UI

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

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

您可以使用 config.rb 在指南针中为Motion UI库添加路径，如以下行所示: code :

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动画.使用数据动画类检查动画在模态上的工作方式.