Foundation 6 - 为 Animate 使用 MotionUI 自定义混合

Question

我已经使用 SASS 安装了 Foundation 6 for Sites，我正在使用 进行编译Gulp。我正在尝试使用 Motion-UI 库来制作一些动画效果，我已经使用了很多。

预制动画的工作演示： http://jsfiddle.net/4a9kux0r/7/

我遇到的问题是尝试使用可用于 Motion-[=74= 的 SASS mixins ] 用于创建自定义效果的库。

我的 Gulp 文件中有以下内容以便处理它...

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 和基础 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 插件的官方文档所述：

"Note that in order to play properly, the element must have at least the property animation-duration applied to it as well."

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

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

问题已解决。

Foundation 6 - 为 Animate 使用 MotionUI 自定义混合

Foundation 6 - Using MotionUI Custom Mixins for Animate

sass

zurb-foundation

css-animations

zurb-foundation-6

motionui