Sass mixins: проблемы с translateX и translateY - PullRequest
Новая
       43

Sass mixins: проблемы с translateX и translateY

0 голосов
/ 31 мая 2018

Я создал миксин для анимации непрозрачности и горизонтального / вертикального положения.Я прочитал документацию на сайте SASS.В настоящее время миксин анимирует непрозрачность, но не может перемещать элементы - 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>

Вот ссылка на скрипту JS, которая поддерживает SCSS: введите описание ссылки здесь

Я былнекоторое время стучал головой, пытаясь понять, что я делаю не так.Любая помощь приветствуется.

1 Ответ

0 голосов
/ 01 июня 2018

Проблема в том, как 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})");
        }
    }
}

Демо здесь .

Надеюсь, это поможет.

...