Sass mixins：translateX 和 translateY 有问题

Question

我创建了一个 mixin 来为不透明度和 horizontal/vertical 位置设置动画。我已通读 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>

这里给link一个支持SCSS的JSfiddle：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.

希望对您有所帮助。

Sass mixins：translateX 和 translateY 有问题

Sass mixins: having issues with translateX and translateY

css

sass

keyframe

css-animations