как использовать функцию scss или mxin для генерации ключевого кадра анимации - PullRequest
Новая
       101

как использовать функцию scss или mxin для генерации ключевого кадра анимации

1 голос
/ 27 сентября 2019

Я использую анимацию с именованным ключевым кадром и хочу сэкономить немного времени.Я видел этот ТАК вопрос о функции ключевого кадра scss Но я чувствую, что это бесполезно (или я глуп, чтобы понять)

Я пробовал пару вариантов 

$green: limegreen;

@mixin pulse-animation($name, $color) {
  @keyframes #{$name} {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba($color, 0.4);
    box-shadow: 0 0 0 0 rgba($color, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 12px rgba($color, 0);
      box-shadow: 0 0 0 12px rgba($color, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba($color, 0);
      box-shadow: 0 0 0 0 rgba($color, 0);
    }
  }
}
.my-element {
  animation: @include pulse-animation("green", $green) 2s infinite;
}

Я бы также предпочел не передавать имя в этот миксин.

1 Ответ

1 голос
/ 27 сентября 2019

Я нашел здесь интересная ситуация, когда сначала вы создаете анимацию с помощью миксина ключевого кадра, а затем вы используете другой микшин для включения этой анимации (см. 4. Анимации и ключевые кадры ).

Однако, если вы не хотите включать 2 миксина, потому что вы хотите сэкономить на написании , другой идеей может быть создание всех необходимых вам анимаций ключевых кадров.используя простой цикл карты: 

$colors:(
 "green": limegreen,
 "black": black,
 "white": white /*here you can add all colors you need*/
);

@each $name, $color in $colors {
  @keyframes #{$name} {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba($color, 0.4);
    box-shadow: 0 0 0 0 rgba($color, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 12px rgba($color, 0);
      box-shadow: 0 0 0 12px rgba($color, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba($color, 0);
      box-shadow: 0 0 0 0 rgba($color, 0);
    }
  }
}

.my-element {
  animation: green 2s infinite;
}
...