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']
   }));

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