CSS 用于动画关键帧的 Sass Mixin，包括多个阶段和变换属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20150621/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sass Mixin for animation keyframe which includes multiple stages and transform property
提问by fidev
Here is the standard CSS I am trying to produce but want to use a SASS Mixin to do the work.
这是我正在尝试生成的标准 CSS，但想使用 SASS Mixin 来完成这项工作。
STANDARD 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);}
}
I'm using the same mixin as in the following post SASS keyframes not compiling as wantedwhich is shown below.
我正在使用与以下帖子中相同的 mixin，SASS 关键帧未按需要编译，如下所示。
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:
以上是可以的，只要没有一个关键帧包含需要供应商前缀的属性。就像 transform 属性一样，所有供应商前缀的关键帧都使用（在这种情况下） -webkit- 前缀。例如：
SCSS
社会保障局
@include keyframes(crank-up) {
100% { -webkit-transform: rotate(360deg);}
}
CSS
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-
注意上面的 -webkit- 和 -moz-keyframe。应该是-moz-
So, my first thought was to alter the above mixin to:
所以，我的第一个想法是将上面的 mixin 更改为：
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
调用 mixin 看起来像
SCSS
社会保障局
@include keyframes(crank-up, transform, rotate(360deg)) { }
CSS
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'.
如果只有一个关键帧“阶段”，这一切正常（参见原始代码 - 页面顶部，只有 100% 标记），请原谅我的术语在关键帧“阶段”方面略有偏差。
PROBLEM
问题
I want a mixin like the above to work with something like.
我想要一个像上面这样的 mixin 来处理类似的事情。
@-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-animationand the newer compass-animatebut 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.
我还研究了两个 Compass Animate 插件；compass-animation和较新的compass-animate但不确定这些是否有帮助。我需要某种方法来添加变量并使用 mixin 对此进行测试，但不知道是否可以将变量传递到 mixin 中。
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};
}
}
回答by Alex Guerrero
To deal with vendor-prefixers I recommend to use Autoprefixerinstead of sass mixins.
为了处理供应商前缀，我建议使用Autoprefixer而不是 sass mixins。
Autoprefixer interface is simple: just forget about vendor prefixes and write normal CSS according to latest W3C specs. You don't need a special language (like Sass) or special mixins.
Because Autoprefixer is a postprocessor for CSS, you can also use it with preprocessors, such as Sass, Stylus or LESS.
Autoprefixer 接口很简单：只需忘记供应商前缀并根据最新的 W3C 规范编写普通 CSS。您不需要特殊的语言（如 Sass）或特殊的 mixin。
因为 Autoprefixer 是 CSS 的后处理器，所以您也可以将它与预处理器一起使用，例如 Sass、Stylus 或 LESS。
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:
并且 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 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...
Autoprefixer 得到广泛支持，您可以使用此工具通过 Compass、Grunt、Sublime Text、node.js、Ruby、Ruby on Rails、PHP 处理您的 scss 或 css 样式...
Hereis more info about the project
这是有关该项目的更多信息
回答by Jimba Tamang
If you are already using Compass and don't want to load whole bounce of extra library and just want to write some mixing then THISis the best option.
如果您已经在使用 Compass 并且不想加载额外库的整个反弹并且只想编写一些混音，那么这是最好的选择。
/* 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;
}
And here is the keyframe Mixing to include CSS3 properties inside particular browser vender prefix, instead of @include translate, we use the full css (Note: if you're using Sass 3.3 or older, you'll need to remove the !globalflag):
这是在特定浏览器供应商前缀中包含 CSS3 属性的关键帧混合，我们使用完整的 css 而不是 @include translate（注意：如果您使用的是 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;
For your reference here is the SASS example:
供您参考，这里是 SASS 示例：
@include keyframes(animation-name) {
0% {
#{$browser}transform: translate3d(100%, 0, 0);
}
100% {
#{$browser}transform: translate3d(0%, 0, 0);
}
}
And here how you include your animation to the particular class or ids
在这里你如何将你的动画包含到特定的类或 id 中
.new-class {
@include animation('animation-name 5s linear');
}
That's all.
就这样。
