Motion UI

优质
小牛编辑
126浏览
2023-12-01

Foundation提供了用于创建UI过渡和动画的Motion UI库,并由Foundation组件(如TogglerRevealOrbit

安装Motion UI

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

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

您可以使用config.rbCompass为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'

Built-in Transitions

Foundation通过使用由Motion UI库创建的过渡类来提供过渡效果。 让我们使用过渡效果创建一个简单example

自定义转换

您可以使用Motion UI库设置自定义过渡类。 例如,我们将为mui-hinge()转换设置自定义类,它会旋转元素 -

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

动画 (Animation)

您可以使用Motion UI过渡效果来创建CSS动画。 单击此link可使用data-animation类检查动画在模态上的工作方式。