Foundation 6 - 为Animate使用MotionUI Custom Mixins

Question

我使用 SASS 安装网站基础6 ，我正在使用 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');

但是如果我尝试制作一个自定义mixin来组合效果，比如 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); } }

Answer 1

正如Motion-UI插件的官方文档中所述：

  

“请注意，为了正常播放，元素必须至少应用属性animation-duration。”

对 CSS3动画不熟悉，我忽略了这个非常大胆的先决条件。我的 SASS 编译得很好。

@include motion-ui-transitions;
.combineAnimate {
  @include mui-animation(fade, spin, slide($direction: up, $amount: 120%));
  animate-duration: 2s;
}

解决了这个问题。