Sass动画混频器使用包括

Question

我试图让这个例子的演示工作-但我没有看到任何动画。我希望尽可能地压缩混音，并使用包含来尝试和保持动画的效率。

https://brandonbrule.github.io/scss-animation-keyframe-mixin/

我的小提琴http://jsfiddle.net/knum7po2/1/

​

// CSS
.animation-slide-in-up{
  @include animation(0, 0.5s, animation-slide-in-up, ease);
}

.animation-slide-in-down{
  @include animation(0, 0.5s, animation-slide-in-down, ease);
}

.animation-slide-in-right{
  @include animation(0, 0.5s, animation-slide-in-right, ease);
}

.animation-slide-in-left{
  @include animation(0, 0.5s, animation-slide-in-left, ease);
}

.animation-slide-out-up{
  @include animation(0, 0.5s, animation-slide-out-up, ease);
}

.animation-slide-out-down{
  @include animation(0, 0.5s, animation-slide-out-down, ease);
}

.animation-slide-out-right{
  @include animation(0, 0.5s, animation-slide-out-right, ease);
}

.animation-slide-out-left{
  @include animation(0, 0.5s, animation-slide-out-left, ease);
}


@mixin keyframe ($animation_name) {
    @-webkit-keyframes $animation_name {
        @content;
    }

    @-moz-keyframes $animation_name {
        @content;
    }

    @-o-keyframes $animation_name {
        @content;
    }

    @keyframes $animation_name {
        @content;
    }
}

@mixin animation ($delay, $duration, $animation, $direction: forward, $fillmode: fowards) {
    -webkit-animation-delay: $delay;
    -webkit-animation-duration: $duration;
    -webkit-animation-name: $animation;
    -webkit-animation-fill-mode: $fillmode;
    -webkit-animation-direction: $direction;

    -moz-animation-delay: $delay;
    -moz-animation-duration: $duration;
    -moz-animation-name: $animation;
    -moz-animation-fill-mode: $fillmode;
    -moz-animation-direction: $direction;

    animation-delay: $delay;
    animation-duration: $duration;
    animation-name: $animation;
    animation-fill-mode: $fillmode;
    animation-direction: $direction;
}




// -- Slide Animations -- //

// Slide Out Top from Center
@include keyframe(animation-slide-out-up) {
    0% {
        transform: translate(0,0);
    }

    100% {
        transform: translate(0,-100%);
    }
}

@include keyframe(animation-slide-out-down) {
    0% {
        transform: translate(0,0);
    }

    100% {
        transform: translate(0,100%);
    }
}

// Slide Out Left from Center
@include keyframe(animation-slide-out-left) {
    0% {
        transform: translate(0,0);
    }

    100% {
        transform: translate(-100%,0);
    }
}

// Slide out Right from Center
@include keyframe(animation-slide-out-right) {
    0% {
        transform: translate(0,0);
    }

    100% {
        transform: translate(100%,0);
    }
}

@include keyframe(animation-slide-in-up) {
    0% {
        transform: translate(0,100%);
    }

    100% {
        transform: translate(0,0);
    }
}

@include keyframe(animation-slide-in-down) {
    0% {
        transform: translate(0,-100%);
    }

    100% {
        transform: translate(0,0);
    }
}

// Slide in Left to Center
@include keyframe(animation-slide-in-left) {
    0% {
        transform: translate(-100%,0);
    }

    100% {
        transform: translate(0,0);
    }
}

// Slide in Right to Center
@include keyframe(animation-slide-in-right) {
    0% {
        transform: translate(100%,0);
    }

    100% {
        transform: translate(0,0);
    }
}

<div class="animation-slide-in-up">c</div>
<div class="animation-slide-in-down">x</div>
<div class="animation-slide-in-right">x</div>
<div class="animation-slide-in-left">x</div>

<div class="animation-slide-out-up">x</div>
<div class="animation-slide-out-down">x</div>
<div class="animation-slide-out-right">x</div>
<div class="animation-slide-out-left">x</div>

​

Answer 1

以下是您的sass不编译的两个原因：

• @mixin总是先于

在sass中没有提升，所以请确保在引用它们之前始终将混合和变量放在一起。

如果要在选择器/属性名称上使用变量，则需要使用interpolations(#{})

变化

@mixin keyframe ($animation_name) {
    @-webkit-keyframes $animation_name {
        @content;
    }
    
    // ...
}

至

@mixin keyframe ($animation_name) {
    @-webkit-keyframes #{$animation_name} {
        @content;
    }
    
    // ...
}

这是固定的小提琴：http://jsfiddle.net/hscbfeox/