0

我已经使用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');

但是，如果我尝试为它制作一个自定义的 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); } }
4

1 回答 1

1

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

"请注意，为了正常播放，元素必须至少还应用了属性动画持续时间。 "

作为CSS3 动画的新手，我忽略了这个非常大胆的先决条件。我的SASS编译得很好。

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

解决问题。

于 2016-02-15T10:13:22.693 回答