J'essaie de configurer ce mixin MOINS pour les images clés d'animation CSS:
.keyframes(@name, @from, @to) {;
@-webkit-keyframes "@name" {
from {
@from;
}
to {
@to;
}
}
}
mais il y a un problème avec la tarification des noms, y a-t-il une option pour le faire correctement?
Quelques modifications ont été apportées dans MOINS 1.7 au fonctionnement des directives, ce qui permet d'utiliser des variables pour le nom/mot-clé de @keyframes
(Donc l'exemple de la question devrait fonctionner maintenant). DÉMO
Malheureusement, les noms d'images clés ne peuvent pas être générés dynamiquement en MOINS <= 1.6
Par conséquent, la façon normale de traiter les images clés utilise des noms codés en dur et vous n'appelez que des mixins spécifiques "pour" et "à", comme ceci:
.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); }
lorsque vous injectez le nom dans le nom de la règle, cela nécessite cependant une déclaration de la règle suivante qui fournit le crochet de fermeture }
à la fin de la déclaration des images clés. Le plus pratique est de créer l'animation appelant cette image clé
.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;
}
}
Notez que vous devez également définir .from(){}
et .to(){}
mixins, et pas seulement utiliser @from
Et @to
Comme vous l'avez fait dans votre exemple (car MOINS ne permet pas non plus les propriétés générées dynamiquement) ... ces mixins peuvent maintenant construire les propriétés et valeurs souhaitées ... pour utiliser des propriétés spécifiques, vous pouvez utiliser des gardes ou des mixins spécifiques au nom comme ceux-ci:
// name-specific from and to mixins that are used if first argument equals "colors"
.from (colors, @color) {
color: @color;
}
.to (colors, @color) {
color: @color;
}
Maintenant, nous pouvons appeler notre mixin en MOINS:
// test
.animation-keyframes (colors, red, blue, my-colanim);
et obtenez CSS:
@keyframes colors {
from {
color: #ff0000;
}
to {
color: #0000ff;
}
}
.my-colanim {
animation-name: colors;
}
cela fonctionnera également dans LESS 1.4, mais notez que nous avons utilisé l'interpolation javascript pour les sauts de ligne, ce qui nécessite une implémentation javascript de LESS.
Modifier: à votre question supplémentaire sur les préfixes
Ici, j'ai fait deux mixins ... un sans préfixe de fournisseur et un avec eux appelant tous les deux un mixin général .keyframes
:
.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);
Le .animation-keyframes
Produira désormais des images clés pour tous les préfixes de fournisseur et un sélecteur d'animation avec des propriétés de préfixe de fournisseur. Et comme prévu, le .animation-keyframes-novendor
Donne la même sortie que la solution simple ci-dessus (sans préfixe de fournisseur).
Pour que votre animation fonctionne réellement, vous devez définir d'autres paramètres d'animation tels que la fonction de synchronisation, la durée, la direction, le nombre d'itérations (nécessite au moins une durée en plus du nom que nous avons déjà défini).
Par exemple:
animation: @name ease-in-out 2s infinite alternate;
Si vous encapsulez les mixins ci-dessus dans les espaces de noms, assurez-vous de changer les références de mixage dans les autres mixins en leur chemin complet (y compris les espaces de noms).
Par exemple:
#namespace > .keyframes () // see .less source in the demo for details
Je travaille actuellement sur une bibliothèque mixin
La source peut être trouvée ici https://github.com/pixelass/more-or-less
Mon mixage d'images clés ressemble à ceci:
.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);
}
}
Que dis-tu de ça:
@-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;}
}
Vous devez le faire pour chaque animation. Tiré de: http://radiatedstar.com/css-keyframes-animations-with-less
Merci aussi à la grande réponse de Martin Turjak , (merci pour cela) Je viens de mettre sur github un mixin moins qui générer des images clés et du code css d'animation sans hacks et de manière flexible, vous pouvez les trouver ici github.com/kuus/animate-me.less .
Avec ce mixin, vous pouvez écrire ce code pour obtenir des CSS valides et croisés (voir le repo github pour une explication complète):
.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'
);
Avant mentionné https://github.com/kuus/animate-me.less fait les choses!
Vous pouvez également consulter celui-ci écrit par moi (semble être plus propre): https://github.com/thybzi/keyframes
Je pense que tu devrais faire ça
@-webkit-keyframes @name
{
code...
}
changement "@name"
à @name
et vous devez supprimer ;
après
.keyframes(@name, @from, @to) {