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%);

Answer 2

我创建了一个Codepen，它使用了Anton Koning的回答https://codepen.io/Hakeemmidan/pen/OJPaezR

中的方法

HTML：

<div></div>

SCSS：

div {
  height: 100px;
  width: 100px;
  background-color: skyblue;
  margin: 60px auto;
  animation: skyblue-to-pink 2s ease infinite;
}

@mixin animation-mixin($name, $color1, $color2) {
  @keyframes #{$name} {
    0% {background-color: $color1;}
    50% {background-color: $color2;}
    100% {background-color: $color1;}
  }
}

@include animation-mixin(skyblue-to-pink, skyblue, pink);

Answer 3

这是一个如何使用它的一般示例：在您的sass文件中，使用混合添加任何类型的关键帧：

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }
    @-moz-keyframes #{$name} {
        @content;
    }
    @-ms-keyframes #{$name} {
        @content;
    }
    @keyframes #{$name} {
        @content;
    }
}

然后，您可以像这样声明所需的动画：

@include keyframes(animate-preloader) {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

并使用它来为您的html元素设置动画，

#yourElement{
    ...
    animation: animate-preloader 1s linear infinite;
}

这可以避免重复代码。

为动画

3 个答案: