sass - 为动画创建一个 SASS mixin

Question

我想创建一个允许动态调整百分比的 mixin。我有点被绊倒了，希望得到一些指点。

这是我想要实现的目标:

   @keyframes slide-1 {
    0%   {transform: translate3d(0, 0, 0);}
    50%  { }
    100% {transform: translate3d(-100%, 0, 0);}
}

@keyframes slide-2 {
    0%   {transform: translate3d(0, 0, 0);}
    50%  { }
    100% {transform: translate3d(-200%, 0, 0);}
}

Mixin 将采用百分比参数 - 我假设动画名称？就像是:

@keyframes $animation-name {
    0%   {transform: translate3d(0, 0, 0);}
    50%  { }
    100% {transform: translate3d($percentage, 0, 0);}
}

Answer 1

您可以在 .sass 文件顶部的某个位置添加 mixin，就在它被调用之前。或者您可以从外部文件中包含它。

@mixin animation-mixin($name, $from, $to) {
  @keyframes #{$name} {
    0% {transform: translate3d($from, 0, 0); opacity: 0;}
    100% {transform: translate3d($to, 0, 0); opacity: 1;}
  }
}

调用 mixin 并传递这 3 个值 $name , $from , $to像这样:

@include animation-mixin(slide-1, 0, 100%);
@include animation-mixin(slide-2, 0, 200%);

它会被翻译成这样:

@keyframes slide-1 {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 1;
  }
}
@keyframes slide-2 {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(200%, 0, 0);
    opacity: 1;
  }
}

演示

HTML

<div class="box-1"></div>
<div class="box-2"></div>

SASS

.box-1,
.box-2 {
  height: 20px;
  width: 20px;
  margin: 5px;
}
.box-1 {
  background-color: blue;
  animation: slide-1 2s ease infinite;
}
.box-2 {
  background-color: red;
  animation: slide-2 2s ease infinite;
}

@mixin animation-mixin($name, $from, $to) {
  @keyframes #{$name} {
    0% {transform: translate3d($from, 0, 0); opacity: 0;}
    100% {transform: translate3d($to, 0, 0); opacity: 1;}
  }
}

@include animation-mixin(slide-1, 0, 100%);
@include animation-mixin(slide-2, 0, 200%);