包含多个阶段和变换属性的动画关键帧的Sass Mixin

Question

这是我正在尝试生成的标准CSS，但我想使用SASS Mixin来完成这项工作。

标准CSS

@-webkit-keyframes crank-up {
  100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes crank-up {
  100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes crank-up {
  100% { -o-transform: rotate(360deg);}
}
keyframes crank-up {
  100% { transform: rotate(360deg);}
}

我在下面的帖子SASS keyframes not compiling as wanted中使用了相同的mixin，如下所示。

混合

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
      @content;
  }
  @-moz-keyframes #{$name} {
      @content;
  }
  @-ms-keyframes #{$name} {
      @content;
  }
  @keyframes #{$name} {
      @content;
  }
}

只要所有关键帧都不包含需要供应商前缀的属性，就可以使用上面的方法。像transform属性一样，所有带有供应商前缀的关键帧都应用了(在本例中) -webkit-前缀。例如：

SCSS

@include keyframes(crank-up) {
  100% { -webkit-transform: rotate(360deg);}
}

CSS

@-webkit-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
@-moz-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
@-ms-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
@keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }

注意上面的-webkit- with a -moz-keyframe。应该是-蚊子-

因此，我的第一个想法是将上面的混入修改为：

更改的混合

@mixin keyframes($first-name, $last-name, $argument) {
  @-webkit-keyframes #{$first-name} {
    -webkit-#{$last-name}: #{$argument};
  }
  @-moz-keyframes #{$first-name} {
    -moz-#{$last-name}: #{$argument};
  }
  @-o-keyframes #{$first-name} {
    -o-#{$last-name}: #{$argument};
  }
  @keyframes #{$first-name} {
    #{$last-name}: #{$argument};
  } 
}

使用对mixin的调用如下所示

SCSS

@include keyframes(crank-up, transform, rotate(360deg)) { }

CSS

@-webkit-keyframes crank-up { -webkit-transform: rotate(360deg); }
@-moz-keyframes crank-up { -moz-transform: rotate(360deg); }
@-o-keyframes crank-up { -o-transform: rotate(360deg); }
@keyframes crank-up { transform: rotate(360deg); }

如果只有一个关键帧“阶段”，这一切正常(参见原始代码-页面顶部，只有100%标记)，如果我的术语在引用关键帧“阶段”时略有偏离，请原谅。

问题

我想要一个像上面这样的混音器与类似的东西一起工作。

@-webkit-keyframes crank-up {
  20%,
  40% { -webikit-transform: translateY(34px); }
  80% { opacity: .8; }
  100% { -webkit-transform: rotate(360deg);}
}

我还研究了两个指南针动画插件：compass-animation和较新的compass-animate，但我不确定它们是否能提供帮助。我需要一些方法来添加一个变量，并使用mixin进行测试，但不知道是否可以将变量传递到mixin中。

任何帮助都非常感谢。谢谢

我一直在尝试以下方法，但都不起作用，我只是想把它们加起来，看看有没有人知道我哪里错了。

实验性MIXINS：

@mixin vendor-prefix($name, $argument, $webkit: "-webkit-", $moz: "-moz-",$o: "-o-", $stale: ""){
  #{$webkit}: #{$name}: #{$argument};
  #{$moz}: #{$name}: #{$argument};
  #{$o}: #{$name}: #{$argument};
  #{$stale}: #{$name}: #{$argument};
}

@mixin vendor-prefix($last-name, $argument){
  @if $name == webkit { 
    -webkit-#{$name}: #{$argument};
  } @else if $name == moz { 
    -moz-#{$name}: #{$argument};
  } @else if $name == o { 
    -o-#{$name}: #{$argument};
  } @else { 
    #{$name}: #{$argument};
  } 
}

Answer 1

为了处理供应商前缀，我建议使用Autoprefixer而不是sass mixins。

CSS接口很简单:只需忘记供应商的前缀，并根据最新的

规范编写普通的W3C。您不需要特殊的语言(如Sass)或特殊的混合。

因为Autoprefixer是CSS的后处理器，所以您也可以将其与预处理器一起使用，例如Sass、Stylus或更少。

因此，在您的情况下，您只需编写以下代码：

@keyframes crank-up {
  20%,
  40% { -webkit-transform: translateY(34px); }
  80% { opacity: .8; }
  100% { -webkit-transform: rotate(360deg);}
}

自动修复程序会自动将其转换为：

@-webkit-keyframes crank-up {
  20%, 40% {
    -webkit-transform: translateY(34px);
  }

  80% {
    opacity: .8;
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes crank-up {
  20%, 40% {
    -webkit-transform: translateY(34px);
  }

  80% {
    opacity: .8;
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

Autoprefixer是广泛支持的，你可以用这个工具处理你的scss或css样式，通过指南针，Grunt，Sublime Text，node.js，Ruby on Rails，PHP…

Here是关于该项目的更多信息

Answer 2

如果你已经在使用指南针，不想加载整个额外的库，只想写一些混音，那么THIS是最好的选择。

/* animation mixing
keyframe animation
@include animation('animation-name .4s 1')*/

@mixin animation($animate...) {
$max: length($animate);
$animations: '';

@for $i from 1 through $max {
    $animations: #{$animations + nth($animate, $i)};

    @if $i < $max {
        $animations: #{$animations + ", "};
    }
}
-webkit-animation: $animations;
-moz-animation:    $animations;
-o-animation:      $animations;
animation:         $animations;
}

这里是关键帧混合，在特定的浏览器供应商前缀中包含CSS3属性，而不是@include translate，我们使用完整的css (注意:如果您使用的是SASS3.3或更早的版本，您将需要删除!global标志)：

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        $browser: '-webkit-' !global;
        @content;
    }
    @-moz-keyframes #{$animationName} {
        $browser: '-moz-' !global;
        @content;
    }
    @-o-keyframes #{$animationName} {
        $browser: '-o-' !global;
        @content;
    }
    @keyframes #{$animationName} {
        $browser: '' !global;
        @content;
    }
} $browser: null;

这里有一个SASS示例供您参考：

@include keyframes(animation-name) {
   0% {
       #{$browser}transform: translate3d(100%, 0, 0);
   }
   100% {
      #{$browser}transform: translate3d(0%, 0, 0);
   }
}

以及如何将动画包含到特定的类或ids中

.new-class {
@include animation('animation-name 5s linear');
}

就这样。