Как установить имя ключевых кадров в LESS

Question

Я пытаюсь настроить этот LESS-миксин для ключевых кадров CSS-анимации:

.keyframes(@name, @from, @to) {;
  @-webkit-keyframes "@name" {
    from {
      @from;  
    }
    to {
      @to;
    }
  }
}

но есть некоторая проблема с именем pharse, есть ли возможность сделать это корректно?

Answer 1

Начиная с LESS >= 1.7 вы можете использовать переменные для ключевых слов (имен) ключевых кадров.

В LESS 1.7 были внесены некоторые изменения в работу директив, что позволяет использовать переменные для имени / ключевого слова @keyframes (поэтому пример из вопроса должен работать сейчас). DEMO

---

К сожалению, имена ключевых кадров не могут быть сгенерированы динамически в LESS <= 1.6

Следовательно, нормальный способ работы с ключевыми кадрами будет использовать жестко закодированные имена, и вы будете вызывать только специальные микшины "for" и "to", например так:

.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'`.@{anim-selector}";
  @{keyf} {
      .from(@name,@from);
        }
      to {
        .to(@name,@to);
      }
  @{anim} {
    animation-name:@name;
  }
}

Обратите внимание, что вам также нужно определить .from(){} а также .to(){} Mixins, а не просто использовать @from а также @to как вы делали в своем примере (потому что LESS также не допускает динамически генерируемых свойств) ... теперь эти миксины могут создавать желаемые свойства и значения... чтобы использовать конкретные свойства, вы можете использовать охранники или специфические для имени миксины, подобные этим:

// name-specific from and to mixins that are used if first argument equals "colors"
.from (colors, @color) {
  color: @color;
}
.to (colors, @color) {
  color: @color;
} 

Теперь мы можем назвать наш миксин в 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 для разрывов строк, что требует реализации LESS в javascript.

---

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

Смешать с префиксами продавца

Здесь я сделал два миксина... один без префиксов вендора и один с ними оба вызывали генерал .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'`.@{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'`.@{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;

• Если вы помещаете вышеупомянутые миксины в пространства имен, убедитесь, что вы изменили ссылки на миксины внутри других миксинов на их полный путь (включая пространства имен).

  Например:

   #namespace > .keyframes () // see .less source in the demo for details

DEMO

Answer 2

В настоящее время я работаю над библиотекой mixin

Источник можно найти здесь https://github.com/pixelass/more-or-less

Мой ключевой миксин выглядит так:

РАБОТАЕТ ЗА МЕНЬШЕ 1.7.x

подмешать

.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);
  }
}

Answer 3

Как насчет этого:

@-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

Answer 4

Также, благодаря отличному ответу Martin Turjak, (спасибо за это) я просто поставил на github меньше миксина, который генерирует ключевые кадры и код CSS анимации без хаков и гибким способом, вы можете найти его здесь github.com/kuus/ одушевленный

С помощью этого миксина вы можете написать этот код для получения действительного и межбраузерного CSS (полное объяснение см. В репозитории github):

.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'
);

Answer 5

Ранее упомянутый https://github.com/kuus/animate-me.less делает вещи!

Вы также можете проверить это, написанное мной (кажется, аккуратнее): https://github.com/thybzi/keyframes

Answer 6

Я думаю, ты должен сделать это

@-webkit-keyframes @name 
{
 code...
}

менять "@name" в @name

и вы должны удалить ; после

.keyframes(@name, @from, @to) {