Я пытаюсь настроить этот LESS mixin для ключевых кадров анимации CSS:
.keyframes(@name, @from, @to) {;
@-webkit-keyframes "@name" {
from {
@from;
}
to {
@to;
}
}
}
но есть какая-то проблема с именем pharse, есть ли возможность сделать это по-разному?
В LESS 1.7 были внесены некоторые изменения в работу директив, что позволяет использовать переменные для имени/ключевого слова @keyframes (так что пример из вопроса должен работать сейчас).
DEMO
К сожалению, имена ключевых кадров не могут быть динамически генерированы в LESS <= 1.6
Следовательно, нормальный способ перехода к ключевым кадрам будет использовать жестко заданные имена, и вы будете вызывать только специальные "для" и "для" mixins, например:
.colors-mixin-frame(@from,@to){
from {color: @from;}
to {color: @to;}
}
.width-mixin-frame(@from,@to){
from {width: @from;}
to {width: @to;}
}
// keyframes with hardcoded names calling for specific mixin frames
@keyframes red-blue { .colors-mixin-frame(red, blue); }
@keyframes change-width { .width-mixin-frame(254px, 512px); }
где вы вводите имя в имя правила, это требует объявления следующего правила, которое поставляет закрывающий скобок } в конце объявления ключевых кадров. Наиболее удобно, если вы просто создаете анимацию, вызывающую этот ключевой кадр
.animation-keyframes(@name, @from, @to, @anim-selector) {
@keyf: ~"@keyframes @{name} { `'\n'`from ";
@anim: ~"} `'\n'`[email protected]{anim-selector}";
@{keyf} {
.from(@name,@from);
}
to {
.to(@name,@to);
}
@{anim} {
animation-name:@name;
}
}
Обратите внимание, что вам также необходимо определить .from(){} и .to(){} mixins, а не просто использовать @from и @to так же, как в вашем примере (поскольку LESS также не позволяет создавать динамически генерируемые свойства).. Этот mixins теперь может создавать желаемые свойства и значения... для использования определенного свойства вы можете использовать защитные устройства или подобные им микшины, такие как:
// name-specific from and to mixins that are used if first argument equals "colors"
.from (colors, @color) {
color: @color;
}
.to (colors, @color) {
color: @color;
}
Теперь мы можем вызвать наш mixin в LESS:
// test
.animation-keyframes (colors, red, blue, my-colanim);
и получите CSS:
@keyframes colors {
from {
color: #ff0000;
}
to {
color: #0000ff;
}
}
.my-colanim {
animation-name: colors;
}
это будет работать и в LESS 1.4, но обратите внимание, что мы использовали интерполяцию javascript для разрывов строк, для которой требуется реализация javascript LESS.
Изменить: на ваш дополнительный вопрос о префиксах
Здесь я сделал два микшина... один без префиксов поставщика и один с ними оба вызывали общий .keyframes mixin:
.keyframes (@name, @from, @to, @vendor:"", @bind:"") {
@keyf: ~"@{bind}@@{vendor}keyframes @{name} { `'\n'`from ";
@{keyf} {
.from(@name,@from);
}
to {
.to(@name,@to);
}
}
.animation-keyframes-novendor (@name, @from, @to, @anim-selector) {
.keyframes (@name, @from, @to);
@anim: ~"} `'\n'`[email protected]{anim-selector}";
@{anim} {
animation-name:@name;
}
}
.animation-keyframes (@name, @from, @to, @anim-selector) {
@bind: "} `'\n'`";
.keyframes (@name, @from, @to, "-moz-");
.keyframes (@name, @from, @to, "-webkit-", @bind);
.keyframes (@name, @from, @to, "-o-", @bind);
.keyframes (@name, @from, @to, "-ms-", @bind);
.keyframes (@name, @from, @to, "", @bind);
@anim: ~"} `'\n'`[email protected]{anim-selector}";
@{anim} {
-moz-animation: @name;
-webkit-animation: @name;
-o-animation: @name;
-ms-animation: @name;
animation: @name;
}
}
.from (colors, @color) {
color: @color;
}
.to (colors, @color) {
color: @color;
}
/* keyframes with all vendor prefixes */
.animation-keyframes (colors, red, blue, my-colanim);
/* keyframes with no vendor prefix */
.animation-keyframes-novendor (colors, red, blue, my-colanim);
.animation-keyframes теперь будет генерировать ключевые кадры для всех префиксов поставщиков и селектор анимации с свойствами префикса поставщика. И, как и ожидалось, .animation-keyframes-novendor дает тот же результат, что и вышеприведенное простое решение (без префиксов поставщика).
Чтобы ваша анимация действительно работала, вам нужно установить другие параметры анимации, такие как функция времени, продолжительность, направление, количество итераций (требуется, по крайней мере, время продолжительности в дополнение к уже заданному имени).
Например:
animation: @name ease-in-out 2s infinite alternate;
Если вы завершаете над mixins в пространствах имен, убедитесь, что вы изменили ссылки mixin внутри других mixins на весь их путь (включая пространства имен).
Например:
#namespace > .keyframes () // see .less source in the demo for details
В настоящее время я работаю над библиотекой mixin
Источник можно найти здесь https://github.com/pixelass/more-or-less
My keyframe mixin выглядит следующим образом:
.keyframes(@name) {
@-webkit-keyframes @name {
.-frames(-webkit-);
}
@-moz-keyframes @name {
.-frames(-moz-);
}
@keyframes @name {
.-frames();
}
}
& {
.keyframes(testanimation);.-frames(@-...){
0% {
left: 0;
@{-}transform: translate(10px, 20px);
}
100% {
left: 100%;
@{-}transform: translate(100px, 200px);
}
}
}
@-webkit-keyframes testanimation {
0% {
left: 0;
-webkit-transform: translate(10px, 20px);
}
100% {
left: 100%;
-webkit-transform: translate(100px, 200px);
}
}
@-moz-keyframes testanimation {
0% {
left: 0;
-moz-transform: translate(10px, 20px);
}
100% {
left: 100%;
-moz-transform: translate(100px, 200px);
}
}
@keyframes testanimation {
0% {
left: 0;
transform: translate(10px, 20px);
}
100% {
left: 100%;
transform: translate(100px, 200px);
}
}
Как насчет этого:
@-webkit-keyframes some-animation {.mixi-frames;}
@-moz-keyframes some-animation {.mixi-frames;}
@-ms-keyframes some-animation {.mixi-frames;}
@-o-keyframes some-animation {.mixi-frames;}
@keyframes some-animation {.mixi-frames;}
.mixi-frames () {
from {width: 254px;}
to {width: 512px;}
}
Вам нужно сделать это для каждой анимации. Взято из: http://radiatingstar.com/css-keyframes-animations-with-less
Также благодаря большому ответу Мартин Туржак (спасибо за это), я просто надел github меньше mixin, который генерирует ключевые кадры и код анимации css без хаков и в гибкой форме вы можете найти его здесь github.com/kuus/animate-me.less.
С помощью этого mixin вы можете написать этот код, чтобы получить действительный и кросс-браузер css (см. github repo для полного объяснения):
.animate-me(ComplexAnimation; 0.4s ease; '.complex-animation';
'50%, 100%'; '%stransform: translateZ(-250px) rotateY(30deg)';
70%; '%stransform: translateZ(-250px) rotateY(30deg); opacity: .5; background: green';
30%; '%stransform: translateZ(-250px) rotateY(30deg); opacity: .2; background: yellow';
80%; '%stransform: translateZ(-250px) rotateY(30deg); opacity: 1; background: red'
);
Ранее упоминавшийся https://github.com/kuus/animate-me.less делает что-то!
Вы также можете проверить это, написанное мной (кажется, опрятно): https://github.com/thybzi/keyframes
Я думаю, вы должны это сделать
@-webkit-keyframes @name
{
code...
}
измените "@name" на @name
и вы должны удалить ; после
.keyframes(@name, @from, @to) {