Motion UI

用於建立彈性 UI 轉場和動畫的 Sass 函式庫。

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 編譯器的匯入路徑清單。以下是透過 config.rb 在 Compass 中新增的方式

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/npm/motion-ui@1.2.3/dist/motion-ui.min.css" />

元件中的使用

各種 Foundation 元件提供選項，在變更狀態時使用 Motion UI 動畫。以下是支援 Motion UI 的每個外掛程式選項

Orbit: data-animate
Reveal: data-animation-in, data-animation-out
Toggler: data-animate
Responsive 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 包含超過 20 個內建轉場類別。在匯入程式庫後，可以透過將此行加入 Sass 檔案來啟用

@include motion-ui-transitions;

自訂轉場

可以使用 Motion UI 的 mixin 程式庫製作自訂轉場類別。以下是自訂鉸鏈的範例。請參閱 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]);

這種情況下，回呼是可選的，且會在動畫完成時觸發。

請注意，Motion UI 動畫的持續時間/動畫速度是透過 Sass 混入變數控制的。JavaScript 僅處理類別和事件監聽器/回呼觸發的增加和移除。
如果您個別包含您的 <script> 標籤，請確定您包含 js/foundation.util.motion.js 路徑。