Sass mixins:使用translateX和translateY时出现问题
Sass mixins:使用translateX和translateY时出现问题
提问于 2018-06-01 04:03:40
我创建了一个混合来设置不透明度和水平/垂直位置的动画。我已经通读了SASS网站上的文档。mixin当前为不透明度设置动画，但无法移动元素-- translateX和translateY。
@mixin keyframes($animation-name, $axis, $start, $end) {
@keyframes #{$animation-name} {
0% {
opacity: 0;
transform: #{$axis}(#{$start});
}
50% {
opacity: 1;
}
100% {
opacity: 1;
transform: #{$axis}(#{$end});
}
}
}
@include keyframes(slideLeft, translateX, 0, 200px);
.slide-left {
animation: slideLeft 2s ease .1s forwards;
}
.redbox {
opacity: 0;
height: 100px;
width: 100px;
background: red;
}<div class="redbox slide-left">
</div>
以下是支持SCSS的JS fiddle的链接：enter link description here
一段时间以来，我一直在苦苦思索，试图找出我到底做错了什么。感谢您的帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-01 06:20:50
问题是Sass是如何编译代码的。您需要使用文字字符串来定义转换值( translate函数)。因此，您需要将属性的值创建为字符串，然后使用unquote函数输出值：
@mixin keyframes($animation-name, $axis, $start, $end) {
@keyframes #{$animation-name} {
0% {
opacity: 0;
transform: unquote("#{$axis}(#{$start})");
}
50% {
opacity: 1;
}
100% {
opacity: 1;
transform: unquote("#{$axis}(#{$end})");
}
}
}演示here。
希望能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50631970
复制相关文章
相似问题