基金会6 - 使用MotionUI自定义混入了动画

问题描述：

我使用SASS安装基金会6站点，我与咕嘟咕嘟编译。我正在尝试使用动画效果的Motion-UI库，并且我有很多工作。基金会6 - 使用MotionUI自定义混入了动画

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

我在试图使用SASSmixins可用于运动的UI库中创建自定义效果的问题。

我在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); } }

新增编译代码。即使进行了变革，它也没有做很多事情。幻灯片甚至没有被编译。 –

答

由于正式文件有关的活动UI插件声明：

“请注意，为了正确播放，该元素必须至少具有属性动画持续时间也适用于它。“

作为新CSS3动画，我忽略了这个非常大胆陈述的先决条件。我SASS被编译就好了。

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

解决了这个问题。

基金会6 - 使用MotionUI自定义混入了动画

相关推荐