SCSS 的关键帧动画不起作用
Posted
技术标签:
【中文标题】SCSS 的关键帧动画不起作用【英文标题】:Keyframe animations with SCSS not working 【发布时间】:2016-01-17 03:50:05 【问题描述】:我是关键帧动画的新手,经过一番搜索后,this article 似乎是一个不错的起点。
这里是codepen中的文章代码-http://codepen.io/anon/pen/yYPxJM
@mixin keyframes($animation-name)
@-webkit-keyframes $animation-name
@content;
@-moz-keyframes $animation-name
@content;
@-ms-keyframes $animation-name
@content;
@-o-keyframes $animation-name
@content;
@keyframes $animation-name
@content;
@mixin animation($str)
-webkit-animation: #$str;
-moz-animation: #$str;
-ms-animation: #$str;
-o-animation: #$str;
animation: #$str;
@include keyframes(slide-down)
0% opacity: 1;
90% opacity: 0;
.element
width: 100px;
height: 100px;
background: black;
@include animation('slide-down 5s 3');
但是,它不能“按原样”工作,我不确定如何继续。
当我向下滚动页面时,我将为对象设置动画。例如,动画一些淡入,另一些缩放(号召性用语)以使它们弹出。 jQuery 应该不是问题,正是这些动画导致了我的问题。
希望能帮助我了解我做错了什么。
提前致谢!
【问题讨论】:
【参考方案1】:您必须使用Interpolation: #,因此您的$animation-name
不会被视为CSS。
这是我最喜欢的关于此事的文章:All You Ever Need to Know About Sass Interpolation
请看一下代码:
@mixin keyframes($animation-name)
@-webkit-keyframes #$animation-name
@content;
@-moz-keyframes #$animation-name
@content;
@-ms-keyframes #$animation-name
@content;
@-o-keyframes #$animation-name
@content;
@keyframes #$animation-name
@content;
@mixin animation($str)
-webkit-animation: #$str;
-moz-animation: #$str;
-ms-animation: #$str;
-o-animation: #$str;
animation: #$str;
@include keyframes(slide-down)
0% opacity: 1;
90% opacity: 0;
.element
width: 100px;
height: 100px;
background: black;
@include animation('slide-down 5s 3');
【讨论】:
@dcpomfret 乐于助人! 这太棒了。谢谢【参考方案2】:我通常使用这样的mixin:
@mixin key_frame($name: "default_anim", $duration: 333ms, $count: infinit)
@keyframes default_anim
0%
bottom: -7px;
100%
bottom: 0;
@keyframes other_anim
0%
bottom: -20px;
100%
bottom: 0;
animation-name: $name;
animation-duration: $duration;
animation-iteration-count: $count;
然后我将它们包括在内:
element
...
@include key_frame(your choices);
【讨论】:
以上是关于SCSS 的关键帧动画不起作用的主要内容,如果未能解决你的问题,请参考以下文章