Sass Mixin для ключевого кадра анимации, который включает в себя несколько этапов и свойство преобразования

вот стандартный CSS, который я пытаюсь создать, но хочу использовать Sass Mixin для выполнения работы.

СТАНДАРТНЫЙ CSS

@-webkit-keyframes crank-up {
  100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes crank-up {
  100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes crank-up {
  100% { -o-transform: rotate(360deg);}
}
keyframes crank-up {
  100% { transform: rotate(360deg);}
}

Я использую тот же mixin, что и в следующем сообщении ключевые кадры SASS не компилируются, как хотели что показано ниже.

MIXIN

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

вышеуказанное в порядке, если ни один из ключевых кадров не включает свойство, которое требует префикса поставщика. Как свойство transform как весь поставщик префиксные ключевые кадры применяются с (в этом случае) префиксом-webkit -. Например:

SCSS

@include keyframes(crank-up) {
  100% { -webkit-transform: rotate(360deg);}
}

в CSS

@-webkit-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
@-moz-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
@-ms-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
@keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }

обратите внимание на вышеизложенное, - webkit-с-moz-ключевым кадром. Должно быть-МОЗ -

Итак, моей первой мыслью было изменить выше подмешать в:

ИЗМЕНЕННЫЙ МИКСИН

@mixin keyframes($first-name, $last-name, $argument) {
  @-webkit-keyframes #{$first-name} {
    -webkit-#{$last-name}: #{$argument};
  }
  @-moz-keyframes #{$first-name} {
    -moz-#{$last-name}: #{$argument};
  }
  @-o-keyframes #{$first-name} {
    -o-#{$last-name}: #{$argument};
  }
  @keyframes #{$first-name} {
    #{$last-name}: #{$argument};
  } 
}

с вызовом в mixin выглядит как

SCSS

@include keyframes(crank-up, transform, rotate(360deg)) { }

в CSS

@-webkit-keyframes crank-up { -webkit-transform: rotate(360deg); }
@-moz-keyframes crank-up { -moz-transform: rotate(360deg); }
@-o-keyframes crank-up { -o-transform: rotate(360deg); }
@keyframes crank-up { transform: rotate(360deg); }

это работает все в порядке, если есть только один ключевой кадр "этап" (см. В исходном коде в верхней части страницы, есть только 100% отметка), извините, если моя терминология немного не соответствует ключевому кадру "этап".

6
css-animations css3 mixins sass

3 ответов

разбираться с поставщиком-prefixers я рекомендую использовать Autoprefixer вместо sass mixins.

интерфейс Autoprefixer прост: Просто забудьте о префиксах поставщиков и напишите обычный CSS в соответствии с последними спецификациями W3C. Вам не нужен специальный язык (например, Sass) или специальные миксины.

поскольку Autoprefixer является постпроцессором для CSS, вы также можете использовать его с препроцессорами, такими как Sass, Stylus или меньше.

Так, в вашем случае вам просто нужно написать следующее:

@keyframes crank-up {
  20%,
  40% { -webkit-transform: translateY(34px); }
  80% { opacity: .8; }
  100% { -webkit-transform: rotate(360deg);}
}

и autoprefixer автоматически преобразует его в:

@-webkit-keyframes crank-up {
  20%, 40% {
    -webkit-transform: translateY(34px);
  }

  80% {
    opacity: .8;
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes crank-up {
  20%, 40% {
    -webkit-transform: translateY(34px);
  }

  80% {
    opacity: .8;
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

Autoprefixer широко поддерживается, вы можете обрабатывать свои стили scss или css с помощью этого инструмента через Compass, Grunt, Sublime Text, node.js, Ruby, Ruby on Rails, PHP...

здесь больше информации о проекте

10

если вы уже используете компас и не хотите загружать весь отскок дополнительной библиотеки и просто хотите написать некоторое смешивание, то этой это лучший вариант.

/* animation mixing
keyframe animation
@include animation('animation-name .4s 1')*/

@mixin animation($animate...) {
$max: length($animate);
$animations: '';

@for $i from 1 through $max {
    $animations: #{$animations + nth($animate, $i)};

    @if $i < $max {
        $animations: #{$animations + ", "};
    }
}
-webkit-animation: $animations;
-moz-animation:    $animations;
-o-animation:      $animations;
animation:         $animations;
}

и вот смешивание ключевых кадров для включения свойств CSS3 внутри определенного префикса браузера vender, вместо @include translate мы используем полный css (Примечание: Если вы используете Sass 3.3 или старше, вам нужно удалить !global флаг):

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        $browser: '-webkit-' !global;
        @content;
    }
    @-moz-keyframes #{$animationName} {
        $browser: '-moz-' !global;
        @content;
    }
    @-o-keyframes #{$animationName} {
        $browser: '-o-' !global;
        @content;
    }
    @keyframes #{$animationName} {
        $browser: '' !global;
        @content;
    }
} $browser: null;

для вашей справки здесь Пример Сасс:

@include keyframes(animation-name) {
   0% {
       #{$browser}transform: translate3d(100%, 0, 0);
   }
   100% {
      #{$browser}transform: translate3d(0%, 0, 0);
   }
}

и вот как вы включаете свою анимацию в конкретный класс или ids

.new-class {
@include animation('animation-name 5s linear');
}

вот и все.

10

Бурбон, компас и компас-анимация (с компасом 0.12) каждый обеспечивает keyframes mixin, который правильно определяет префиксы поставщиков.

6