web-dev-qa-db-fra.com

Comment définir le nom des images clés en MOINS

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?

csslessmixinscss-animations
28
Lukas

À partir de MOINS> = 1,7, vous pouvez utiliser des variables pour les mots clés des images clés (noms).

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

Mais vous pouvez utiliser une solution de contournement pour générer dynamiquement les noms

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

Mixin avec les préfixes des fournisseurs

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

Quelques notes:

  • 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

DÉMO

31
Martin Turjak

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:

TRAVAILLE POUR MOINS 1.7.x

MIXIN

.keyframes(@name) { 
    @-webkit-keyframes @name {
        .-frames(-webkit-);
    }
    @-moz-keyframes @name {
        .-frames(-moz-);
    }
    @keyframes @name {
        .-frames();
    }
}

CONTRIBUTION

& {
    .keyframes(testanimation);.-frames(@-...){
        0% {
            left: 0;
            @{-}transform: translate(10px, 20px);
        }

        100% {
            left: 100%;
            @{-}transform: translate(100px, 200px);
        }
    }
}

PRODUCTION

@-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);
  }
}
4
user950658

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

2
JVitela

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'
);
1
kuus

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

0
thybzi

Je pense que tu devrais faire ça

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

changement "@name" à @name

et vous devez supprimer ; après

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