基礎-モーションUI

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

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ファイルにモーションUIライブラリをインポートします-

@import 'motion-ui'

Foundationは、Motion UIライブラリによって作成される遷移クラスを使用して、遷移効果を提供します。遷移効果を使用して、1つの単純なリンクを作成しましょう：/foundation/foundation_transitions [example]。

Motion UIライブラリを使用して、カスタム遷移クラスを設定できます。例えば、我々は要素を回転させる_mui-hinge（）_遷移のカスタムクラスを設定します-

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

Motion UI遷移効果を使用して、CSSアニメーションを作成できます。このリンク：/foundation/reveal_animations [link]をクリックして、_data-animation_クラスを使用したモーダルでのアニメーションの動作を確認します。