Переключение между: global и: local css модулями для анимации элементов с использованием sass mixins - PullRequest
Новая
       52

Переключение между: global и: local css модулями для анимации элементов с использованием sass mixins

0 голосов
/ 09 апреля 2019

Я хотел переключиться между: global и: local при использовании ключевых кадров и анимации, и приведенный ниже код работает: 

@mixin keyframe ($animation_name, $isGlobal: false) {
  @if $isGlobal {
    @-webkit-keyframes :global(#{$animation_name}) {
      @content;
    }

    @-moz-keyframes :global(#{$animation_name}) {
      @content;
    }

    @keyframes :global(#{$animation_name}) {
      @content;
    }
  }

  @else {
    @-webkit-keyframes #{$animation_name} {
      @content;
    }

    @-moz-keyframes #{$animation_name} {
      @content;
    }

    @keyframes #{$animation_name} {
      @content;
    }
  }
}

@mixin animation (
  $animation_name,
  $duration,
  $isGlobal: false,
  $animation_timing_function: linear,
  $delay: 0,
  $fillmode: forwards,
  $direction: normal,
) {
  @if $isGlobal {
    :global {
      -webkit-animation-name: $animation_name;
      -webkit-animation-duration: $duration;
      -webkit-animation-timing-function: $animation_timing_function;
      -webkit-animation-delay: $delay;
      -webkit-animation-fill-mode: $fillmode;
      -webkit-animation-direction: $direction;

      -moz-animation-name: $animation_name;
      -moz-animation-duration: $duration;
      -moz-animation-timing-function: $animation_timing_function;
      -moz-animation-delay: $delay;
      -moz-animation-fill-mode: $fillmode;
      -moz-animation-direction: $direction;

      animation-name: $animation_name;
      animation-duration: $duration;
      animation-timing-function: $animation_timing_function;
      animation-delay: $delay;
      animation-fill-mode: $fillmode;
      animation-direction: $direction;
    }
  }
  @else {
    -webkit-animation-name: $animation_name;
    -webkit-animation-duration: $duration;
    -webkit-animation-timing-function: $animation_timing_function;
    -webkit-animation-delay: $delay;
    -webkit-animation-fill-mode: $fillmode;
    -webkit-animation-direction: $direction;

    -moz-animation-name: $animation_name;
    -moz-animation-duration: $duration;
    -moz-animation-timing-function: $animation_timing_function;
    -moz-animation-delay: $delay;
    -moz-animation-fill-mode: $fillmode;
    -moz-animation-direction: $direction;

    animation-name: $animation_name;
    animation-duration: $duration;
    animation-timing-function: $animation_timing_function;
    animation-delay: $delay;
    animation-fill-mode: $fillmode;
    animation-direction: $direction;
  }
}

Но, как вы можете заметить, ряд строк кода, кажется, повторяется. Я попробовал способ уменьшить дублирование, но он не работает, поскольку код локализован: 

@mixin keyframe ($animation_name, $isGlobal: false) {
  $updated_animation_name: $animation_name;

  @if $isGlobal {
    $updated_animation_name: (:global(#{$animation_name}));
  }

  @-webkit-keyframes #{$updated_animation_name} {
    @content;
  }

  @-moz-keyframes #{$updated_animation_name} {
    @content;
  }

  @keyframes #{$updated_animation_name} {
    @content;
  }
}

Есть ли решение для минимизации строки кода? Спасибо в ожидании

1 Ответ

1 голос
/ 10 апреля 2019

Для @mixin keyframe вы можете сделать это: 

@mixin keyframe ($animation_name, $isGlobal: false) {
  @if $isGlobal {
     $animation_name: #{':global('+$animation_name+')'};
  }

  @-webkit-keyframes #{$animation_name} {
     @content;
  }

  @-moz-keyframes #{$animation_name} {
     @content;
  }

  @keyframes #{$animation_name} {
     @content;
  }
}

Вы можете еще больше оптимизировать его с помощью цикла для добавления префиксов: 

@mixin keyframe ($animation_name, $isGlobal: false) {
  @if $isGlobal {
    $animation_name: #{':global('+$animation_name+')'};
  }

  @each $prefix in moz, webkit {
    @-#{$prefix}-keyframes #{$animation_name} {
      @content;
    }
  }

  @keyframes #{$animation_name} {
    @content;
  }
}

Для второго:первое, что вы можете сделать, это использовать миксин с автопрефиксом, такой как , сделанный Уго Жирауделем : 

@mixin prefix($declarations, $prefixes: ()) {
  @each $property, $value in $declarations {
    @each $prefix in $prefixes {
      #{'-' + $prefix + '-' + $property}: $value;
    }

    // Output standard non-prefixed declaration
    #{$property}: $value;
  }
}

, а затем включить его в @mixin animation: 

@mixin animation (
  $animation_name,
  $duration,
  $isGlobal: false,
  $animation_timing_function: linear,
  $delay: 0,
  $fillmode: forwards,
  $direction: normal
) {
  @if $isGlobal {
    :global {
      @include prefix((
        animation-name: $animation_name,
        animation-duration: $duration,
        animation-timing-function: $animation_timing_function,
        animation-delay: $delay,
        animation-fill-mode: $fillmode,
        animation-direction: $direction
      ), webkit moz);
    }
  }
  @else {
    @include prefix((
      animation-name: $animation_name,
      animation-duration: $duration,
      animation-timing-function: $animation_timing_function,
      animation-delay: $delay,
      animation-fill-mode: $fillmode,
      animation-direction: $direction
    ), webkit moz);
  }
}
...