我创建了一个混合来设置不透明度和水平/垂直位置的动画。我已经通读了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
一段时间以来,我一直在苦苦思索,试图找出我到底做错了什么。感谢您的帮助。
发布于 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。
希望能有所帮助。
https://stackoverflow.com/questions/50631970
复制相似问题