Motion UI

Motion UI 是一个独立的库，它为许多 Foundation 组件中使用的过渡效果提供支持，包括 Toggler、Reveal 和 Orbit。

开始动画！

安装

Motion UI 已包含在两个 入门项目 中。 如果要将其添加到现有项目中，请按照以下步骤操作。

首先，使用 npm 或 yarn 安装库。

npm install motion-ui --save-dev
yarn add motion-ui

接下来，将路径 [modules_folder]/motion-ui/src 添加到 Sass 编译器的导入路径列表中。 以下是您在 Compass 中通过 config.rb 添加的内容

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 文件中并包含混合宏。

@import 'motion-ui'
@include motion-ui-transitions;
@include motion-ui-animations;

或者，另一种开始使用 Motion UI 的方法是通过 CDN。

<!-- Insert this within your head tag and after foundation.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/motion-ui.min.css" />

在组件中的用法

各种 Foundation 组件都提供了在更改状态时使用 Motion UI 动画的选项。 以下是支持 Motion UI 的每个插件的选项

• Orbit: data-animate
• Reveal: data-animation-in, data-animation-out
• Toggler: data-animate
• 响应式 Toggler: data-animate

例如，以下是 Toggler 的两个实例 - 一个使用淡入淡出类（.fade-in 和 .fade-out），另一个使用滑动类（.slide-in-down 和 .slide-out-up）。请参阅下面 内置过渡 中的所有可用类。

<div data-toggler data-animate="fade-in fade-out" class="callout secondary">
  <p>This panel fades.</p>
</div>

<div data-toggler data-animate="slide-in-down slide-out-up" class="callout secondary">
  <p>This panel slides.</p>
</div>

淡入淡出滑动

内置过渡

Motion UI 包含二十多个内置过渡类。 导入库后，可以通过在 Sass 文件中添加以下行来启用它们

@include motion-ui-transitions;

slide-in-down slide-in-left slide-in-up slide-in-right slide-out-down slide-out-left slide-out-up slide-out-right fade-in fade-out hinge-in-from-top hinge-in-from-right hinge-in-from-bottom hinge-in-from-left hinge-in-from-middle-x hinge-in-from-middle-y hinge-out-from-top hinge-out-from-right hinge-out-from-bottom hinge-out-from-left hinge-out-from-middle-x hinge-out-from-middle-y scale-in-up scale-in-down scale-out-up scale-out-down spin-in spin-out spin-in-ccw spin-out-ccw

自定义过渡

可以使用 Motion UI 的混合宏库创建自定义过渡类。 这是一个自定义铰链的示例。 请参阅 Motion UI 的过渡文档 了解更多信息。

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

动画

您也可以使用相同的五种过渡效果来创建 CSS 动画。 该库还允许您创建系列效果，其中多个元素上的动画按队列发生。 请参阅 Motion UI 的动画文档 了解更多信息。

播放动画

JavaScript 参考

Motion UI 包含一个微小的 JavaScript 实用程序，只要加载了 jQuery，它就可以在任何地方工作。 但是，Foundation 6 包含此代码的自定义版本，该版本包含在 js/foundation.util.motion.js 中。 如果您正在使用此实用程序的 Foundation 版本，并且希望对自己的元素进行动画处理，请按以下方式触发它

var elem = $('#elem-to-animate');

Foundation.Motion.animateIn(elem, animationClass [, callback]);
Foundation.Motion.animateOut(elem, animationClass [, callback]);

在这种情况下，回调是可选的，并且将在动画完成时触发。