問題タブ [motionui]

SASSを使用してFoundation 6 for Sitesをインストールし、 Gulpでコンパイルしています。Motion-UIライブラリをいくつかのアニメーション効果に使用しようとしていますが、多くの機能が動作しています。

ビルド済みアニメーションの動作デモ: http://jsfiddle.net/4a9kux0r/7/

私が抱えている問題は、 Motion-UIライブラリで利用可能なSASSを使用してカスタム効果を作成しようとしていることです。 mixins

それを処理するために、Gulpfileに次のものがあります...

したがって、これを念頭に置いて、.scss私が使用している残りのファイルはパーシャルに設定されています。

そして私のapp.scssファイル...

以上のことから、事前に作成されたアニメーションは次のように正常に動作しています。

MotionUI.animateOut($('#foo'), 'fade-in');

しかし、エフェクトを組み合わせるためにカスタム ミックスインを作成しようとすると、このSASS_animations.scssのようにパーシャルに配置しました

このようなものは機能しません...

MotionUI.animateOut($('#foo'), 'combineAnimate');

おそらく、カスタムアニメーションを定義している、または何かを適切にインポートしていないなどの問題です。gulpとfoundation 6を使用するのはこれが初めてで、まだすべてをつなぎ合わせようとしているので、どんな助けも心から感謝しています!

ドキュメント: https://github.com/zurb/motion-ui/blob/master/docs/animations.md

次の css コードにコンパイルするだけです。

Foundation 6 を使用しており、モーション UI トランジションとアニメーションを SASS ファイルにインポートしています。

しかし、以下のようなことをすると、アニメーションは発生しません。何が足りないの?!

ありがとう

Foundation Zurb テンプレートを使用していますが、Motion UI ライブラリを使い始めるのに苦労しています。これらのドキュメントに従って機能する要素の簡単な遷移を取得しようとしています:

ただし、コンソール エラーが発生し続けます。

Uncaught ReferenceError: MotionUI が HTMLAnchorElement で定義されていません。

html:

app.js:

Motion UI の組み込みクラスでもある程度成功しましたが、カスタム ミックスインを使用しようとすると、次のアニメーションが機能します。

一方、この移行は次のことを行いません。

なぜこれらのことが起こっているのか、私は少し混乱しています。