时间戳

首页 > 解决方案 > Sass mixins：遇到 translateX 和 translateY 的问题

css - Sass mixins：遇到 translateX 和 translateY 的问题

问题描述

我创建了一个 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 的链接：在此处输入链接描述

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

标签： csssasscss-animationskeyframe

解决方案

问题在于 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})");
        }
    }
}

演示在这里。

希望能帮助到你。

推荐阅读