mixin

mixin

关注
发信
关注(28)粉丝(399)

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

本文介绍了Sass Mixin用于包含多个阶段和变换属性的动画关键帧的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这里是我想要产生的标准CSS，但想要使用SASS Mixin来完成这项工作。



STANDARD 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）;} 
} 
关键帧起动{
 100％{transform：rotate（360deg）;} 
}

我正在使用与下面的帖子相同的mixin ，如下所示。



MIXIN 

  @mixin关键帧（$ name）{
 @ -webkit-keyframes＃{$ name} {
 @content; 
} 
 @ -moz-keyframes＃{$ name} {
 @content; 
} 
 @ -ms-keyframes＃{$ name} {
 @content; 
} 
 @keyframes＃{$ name} {
 @content; 
} 
}

上面的是可以的，关键帧包括需要供应商前缀的属性。与transform属性一样，所有的供应商前缀关键帧都应用（在这种情况下）-webkit-前缀。
例如：



SCSS 

  （曲柄）{
 100％{-webkit-transform：rotate（360deg）;} 
}

CSS 

  @  -  webkit-keyframes crank-up {100％{-webkit-transform：旋转（360度）; }} 
 @ -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-关键帧。应该是-moz -



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



ALTERED MIXIN 

  @mixin关键帧（$ 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关键帧（起动，转换，旋转））{}

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）; }

如果只有一个关键帧'stage'



问题


的页面，只有100％的标记），如果我的术语稍微偏离了关键帧阶段

我想要一个像上面这样的mixin。

  @  -  webkit-keyframes crank -up {
 20％，
 40％{-webikit-transform：translateY（34px）; } 
 80％{opacity：.8; } 
 100％{-webkit-transform：rotate（360deg）;} 
}

我也看过两个Compass Animate插件; 和更新的，但不是真的确定如果这些可以帮助。我需要一些方法添加一个变量和测试与一个mixin，但不知道是否可能传递变量mixins。



任何帮助非常感激。感谢



我一直在玩下面但是没有工作，只是想我会添加他们看看是否有人知道我在哪里错了。 / p>

实验性混合：

  @mixin供应商前缀$ argument，$ webkit：-webkit-，$ moz：-moz  - ，$ o：-o-，$ stale：）{
＃{$ webkit}：＃{$ name}：＃{$ argument}; 
＃{$ moz}：＃{$ name}：＃{$ argument}; 
＃{$ o}：＃{$ name}：＃{$ argument}; 
＃{$ stale}：＃{$ name}：＃{$ argument} 
} 
 
 @mixin供应商前缀（$ 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}; 
} 
}


解决方案

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

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

  @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起动{
 20％，40％{
 -webkit-transform：translateY（34px）; 
} 
 
 80％{
 opacity：.8; 
} 
 
 100％{
 -webkit-transform：rotate（360deg）; 
} 
}

Autoprefixer广泛支持，您可以处理您的scss或css样式使用这个工具通过Compass，Grunt，Sublime Text，node.js，Ruby，Ruby on Rails，PHP ...



是关于项目的更多信息


Here is the standard CSS I am trying to produce but want to use a SASS Mixin to do the work.

STANDARD 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);}
}

I'm using the same mixin as in the following post SASS keyframes not compiling as wanted which is shown below.

MIXIN

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

The above is OK, as long as none of the keyframes include a property that requires a vendor prefix. Like the transform property as all the vendor prefixed keyframes get applied with (in this case) the -webkit- prefix.For example:

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

Notice the above, -webkit- with a -moz-keyframe. Should be -moz-

So, my first thought was to alter the above mixin to:

ALTERED 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};
  } 
}

With a call to the mixin looking like

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

This works all ok if there is only ONE Keyframe 'stage' (see in original code - top of page, there's only the 100% mark), excuse if my terminology is slightly off in reference to keyframe 'stage'.

PROBLEM

I want a mixin like the above to work with something like.

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

I have also looked into the two Compass Animate plugins; compass-animation and the newer compass-animate but not really sure if these can help. I need some way of adding in a variable and testing for this with a mixin but don't know if it's possible to pass variable into mixins.

Any help much appreciated. Thanks

I've been playing around with the following but neither work, just thought I'd add them up to see if anyone knows where I'm going wrong.

EXPERIMENTAL 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};
  } 
}
解决方案

To deal with vendor-prefixers I recommend to use Autoprefixer instead of sass mixins.

So, in your case, you just need to write this:

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

And autoprefixer converts it automatically to:

@-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 is widely supported, you can process your scss or css styles with this tool through Compass, Grunt, Sublime Text, node.js, Ruby, Ruby on Rails, PHP...

Here is more info about the project

这篇关于Sass Mixin用于包含多个阶段和变换属性的动画关键帧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-21 23:28
Powered by LMLPHP ©2024 mixin 0.002032