Sass mixins：遇到 translateX 和 translateY 的问题

Question

我创建了一个 mixin 来为不透明度和水平/垂直位置设置动画。我已经阅读了 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

我一直在敲我的头，试图找出我做错了什么。任何帮助表示赞赏。

Answer 1

问题在于 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.

希望对你有帮助。