用于动画关键帧的 Sass Mixin，包括多个阶段和变换属性

Posted 2023-03-05

【中文标题】用于动画关键帧的 Sass Mixin，包括多个阶段和变换属性

【英文标题】：Sass Mixin for animation keyframe which includes multiple stages and transform property

【发布时间】：2013-12-07 16:09:35

【问题描述】：

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

标准 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- 和 -moz-keyframe。应该是-moz-

所以，我的第一个想法是将上面的 mixin 更改为：

改变的混合

@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% 标记），请原谅我的术语在参考关键帧“阶段”时略有偏差。

问题

我想要一个像上面这样的 mixin 来处理类似的东西。

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

我还研究了两个 Compass Animate 插件； compass-animation 和较新的 compass-animate 但不确定这些是否有帮助。我需要某种方式来添加变量并使用 mixin 对此进行测试，但不知道是否可以将变量传递给 mixin。

非常感谢任何帮助。谢谢

我一直在玩以下但都没有工作，只是想我会把它们加起来看看是否有人知道我哪里出错了。

实验性混合：

@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;
   

【参考方案1】：

如果您已经在使用 Compass 并且不想加载额外库的整个弹跳并且只想编写一些混音，那么 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 翻译，我们使用完整的 css（注意：如果您使用的是 Sass 3.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% 
       #$browsertransform: translate3d(100%, 0, 0);
   
   100% 
      #$browsertransform: translate3d(0%, 0, 0);
   

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

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

就是这样。

【讨论】：

sass 代码的 sn-p 在 sass 3.4+ 中不起作用，因为导入了作用域；我们应该通过“！global”关键字使其正常工作。

【参考方案2】：

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

Autoprefixer 界面很简单：只需忘记供应商前缀并根据最新的 W3C 规范编写普通的 CSS。您不需要特殊的语言（如 Sass）或特殊的 mixin。

因为 Autoprefixer 是 CSS 的后处理器，您也可以将它与 Sass、Stylus 或 LESS 等预处理器一起使用。

所以，在你的情况下，你只需要这样写：

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

并且 autoprefixer 会自动将其转换为：

@-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 得到广泛支持，您可以使用此工具通过 Compass、Grunt、Sublime Text、node.js、Ruby、Ruby on Rails、php 处理您的 scss 或 css 样式...

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

【讨论】：

谢谢，但我有点困惑。 -moz- 和 -o- 关键帧前缀在每个关键帧阶段中都有自己的变换前缀。

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

使用 autoprefixer，您可以指定要在项目中定位的浏览器以及每个浏览器的版本。我有支持每个网络浏览器的最后两个版本的默认设置（最后两个版本firefox 不需要关键帧和Opera now uses Webkit 的前缀）。如果您想编辑您的偏好，请查看guide

感谢@Alex，这就是为什么我的答案中没有 -o- 前缀的原因。很高兴知道！