Foundation - 運動UI

Foundation 提供 Motion UI 庫用於建立 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 在 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']
   }));

使用以下程式碼在 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 動畫。單擊此連結檢視動畫如何在使用 data-animation 類的模態框中工作。