Foundation-モーションUI

Foundationは、UIトランジションとアニメーションを作成するためのMotion UIライブラリを提供し、Toggler、Reveal、OrbitなどのFoundationコンポーネントによって使用されます。

MotionUIのインストール

次のコード行に示すように、npmまたはbowerを使用して、プロジェクトにMotionUIライブラリをインストールできます。

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

次のコード行に示すように、config.rbを使用して、コンパスにモーション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']
   }));

次のコードを使用して、モーションUIライブラリをSASSファイルにインポートします-

@import 'motion-ui'

Foundationは、MotionUIライブラリによって作成された遷移クラスを使用して遷移効果を提供します。遷移効果を使用して1つの簡単な例を作成しましょう。

Motion UIライブラリを使用して、カスタムトランジションクラスを設定できます。たとえば、要素を回転させるmui-hinge（）遷移のカスタムクラスを設定します-

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

モーションUIトランジションエフェクトを使用してCSSアニメーションを作成できます。このリンクをクリックして、data-animationクラスを使用してモーダルでアニメーションがどのように機能するかを確認します。