sass - Foundation 6 - Animate に MotionUI カスタム Mixin を使用する

Question

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

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

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

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

var PATHS = {
...
    sass: [
        'bower_components/foundation-sites/scss',
        'bower_components/motion-ui/src/'
    ],
...
};

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

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

@import 'settings';
@import 'foundation';
@import 'motion-ui';
...
@include motion-ui-transitions;
@include motion-ui-animations;
@import 'partials/base';
@import 'partials/typography';
@import 'partials/utilities';
@import 'partials/animations';

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

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

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

.combineAnimate {
  @include mui-animation(fade, spin, slide($direction: up, $amount: 120%));
}

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

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

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

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

---

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

.combineAnimate {
  -webkit-animation-name: custom-1;
          animation-name: custom-1; }

@-webkit-keyframes custom-1 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(-1turn) translateY(120%);
            transform: rotate(-1turn) translateY(120%); }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0) translateY(0);
            transform: rotate(0) translateY(0); } }

@keyframes custom-1 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(-1turn) translateY(120%);
            transform: rotate(-1turn) translateY(120%); }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0) translateY(0);
            transform: rotate(0) translateY(0); } }