3

そのため、css3 キーフレーム用の LESS mixin を作成しようとしています。ID とクラスをチェーンする方法は通常次のようになります。

#idOne,
#idTwo,
.classOne,
.classTwo {
    ...
}

それは何も新しいことではなく、大したことではありません。私が今しようとしているのは、次のミックスインを作成することです

#rotate(@deg){
    -webkit-transform: rotate(@deg);
    -moz-transform: rotate(@deg);
    -o-transform: rotate(@deg);
}

以下について：

@-webkit-keyframes wiggle {
  10% { #rotate(14deg); } 
  20% { #rotate(-12deg); }  
  30% { #rotate(10deg); } 
  40% { #rotate(-8deg); }
  50% { #rotate(6deg); }
  60% { #rotate(-4deg); } 
  70% { #rotate(3deg); }  
  80% { #rotate(-2deg); } 
  90% { #rotate(1deg); }  
  100% { #rotate(0deg); } 
}

@-moz-keyframes wiggle {
  10% { #rotate(14deg); }  
  20% { #rotate(-12deg); } 
  30% { #rotate(10deg); }  
  40% { #rotate(-8deg); }
  50% { #rotate(6deg); }
  60% { #rotate(-4deg); }  
  70% { #rotate(3deg); } 
  80% { #rotate(-2deg); }  
  90% { #rotate(1deg); } 
  100% { #rotate(0deg); }
}

@-o-keyframes wiggle {
  10% { #rotate(14deg); }  
  20% { #rotate(-12deg); } 
  30% { #rotate(10deg); }  
  40% { #rotate(-8deg); }
  50% { #rotate(6deg); }
  60% { #rotate(-4deg); }  
  70% { #rotate(3deg); } 
  80% { #rotate(-2deg); }  
  90% { #rotate(1deg); } 
  100% { #rotate(0deg); }  
}

@keyframes wiggle {
  10% { #rotate(14deg); }  
  20% { #rotate(-12deg); } 
  30% { #rotate(10deg); }  
  40% { #rotate(-8deg); }
  50% { #rotate(6deg); }
  60% { #rotate(-4deg); }  
  70% { #rotate(3deg); } 
  80% { #rotate(-2deg); }  
  90% { #rotate(1deg); } 
  100% { #rotate(0deg); }  
}

ここでの質問: なぜ私はこれをすべて次のように行うことができないのですか:

@-webkit-keyframe,
@-moz-keyframes,
@-o-keyframes,
@keyframes {
  10% { #rotate(14deg); } 
  20% { #rotate(-12deg); }  
  30% { #rotate(10deg); } 
  40% { #rotate(-8deg); }
  50% { #rotate(6deg); }
  60% { #rotate(-4deg); } 
  70% { #rotate(3deg); }  
  80% { #rotate(-2deg); } 
  90% { #rotate(1deg); }  
  100% { #rotate(0deg); } 
}

どんな助けでも大歓迎です！ありがとうございました！

4

1 に答える 1

8

更新された LESS 1.7+ の回答

これは次のように簡略化できます (ルールセットを変数に設定し、変数名を使用できるようになったため@keyframes[私が知る限り、拡張機能にはまだ適用されていません]):

@myWiggle:   {
  10% { #rotate(14deg); }  
  20% { #rotate(-12deg); } 
  30% { #rotate(10deg); }  
  40% { #rotate(-8deg); }
  50% { #rotate(6deg); }
  60% { #rotate(-4deg); }  
  70% { #rotate(3deg); } 
  80% { #rotate(-2deg); }  
  90% { #rotate(1deg); } 
  100% { #rotate(0deg); }
};

#rotate(@deg){
    @{vendor}transform: rotate(@deg);
}

#doKeyFrames(@name; @frames) {
    @-webkit-keyframes @name {
      @vendor: -webkit-;
      @frames(); 
    }
    @-moz-keyframes @name {
      @vendor: -moz-;
      @frames(); 
    }
    @-o-keyframes @name {
      @vendor: -o-;
      @frames(); 
    } 
    @keyframes @name {
      @vendor: ~'';
      @frames(); 
    }
}

#doKeyFrames(wiggle; @myWiggle);

オリジナル（LESS 1.7以前）の回答

思い通りにできない理由は二つあると思います。1) LESS は変数に符号を@使用するため、規則を適切に処理する上でいくつかの問題があります。2)およびアニメーション用の独自の CSS が、他の独自の CSS と混合するとうまく動作しないことがあること@に気付きました。keyframesで与えた複雑な以前の回答をkeyframes変更して、CSS 出力の機能を完全に拡張しながら、LESS 側でややコンパクトに保つ​​コードを作成することができました。

いくつかのトリック (前の回答でリンクしています) を使用して、文字列と変数を組み合わせて出力を取得します。それが実際にどのように機能するかについて、私にはまだ少し謎の部分がいくつかありますが、正しくコンパイルされているようです。

以下

.rotate(@percent, @vendor, @deg) {
   @rotation: ~"rotate(@{deg}deg)";
   //define vendor patterns
   .makeVendor("-moz-") {
     (@percent) {-moz-transform: @rotation;}
    }
   .makeVendor("-webkit-") {
     (@percent) {-webkit-transform: @rotation;}
    }
   .makeVendor("-o-") {
     (@percent) {-o-transform: @rotation;}
    }
   .makeVendor("-ms-") {
     (@percent) {-ms-transform: @rotation;}
    }
   .makeVendor("") {
     (@percent) {transform: @rotation;}
    }
    //call vendor specific string
    .makeVendor(@vendor);

}

// define keyframe mixin

.keyframes(@selector, @name) {
    @newline: `"\n"`; // Newline
    .setVendor(@pre, @post, @vendor) {
        (~"@{pre}@@{vendor}keyframes @{name} {@{newline}"){
         .rotate(10%, @vendor, 14);  
}
         .rotate(20%, @vendor, -12);
         .rotate(30%, @vendor, 10);
         .rotate(40%, @vendor, -8);
         .rotate(50%, @vendor, 6);
         .rotate(60%, @vendor, -4);
         .rotate(70%, @vendor, 3);
         .rotate(80%, @vendor, -2);
         .rotate(90%, @vendor, 1);
         .rotate(100%, @vendor, 0);  

       .Local(){}
       .Local() when (@post=1) {
           (~"}@{newline}@{selector}") {
              -moz-animation: @name;
              -webkit-animation: @name;
              -o-animation: @name;
              -ms-animation: @name;
              animation: @name;
           } 
       }    
       .Local;
    } 
    .setVendor(""            , 0,    "-moz-");
    .setVendor(~"}@{newline}", 0, "-webkit-");
    .setVendor(~"}@{newline}", 0,      "-o-");
    .setVendor(~"}@{newline}", 0,     "-ms-");
    .setVendor(~"}@{newline}", 1,         "");
}

CSS出力

@-moz-keyframes wiggle {
 10% {
  -moz-transform: rotate(14deg);
}
20% {
  -moz-transform: rotate(-12deg);
}
30% {
  -moz-transform: rotate(10deg);
}
40% {
  -moz-transform: rotate(-8deg);
}
50% {
  -moz-transform: rotate(6deg);
}
60% {
  -moz-transform: rotate(-4deg);
}
70% {
  -moz-transform: rotate(3deg);
}
80% {
  -moz-transform: rotate(-2deg);
}
90% {
  -moz-transform: rotate(1deg);
}
100% {
  -moz-transform: rotate(0deg);
}
}
@-webkit-keyframes wiggle {
 10% {
  -webkit-transform: rotate(14deg);
}
20% {
  -webkit-transform: rotate(-12deg);
}
30% {
  -webkit-transform: rotate(10deg);
}
40% {
  -webkit-transform: rotate(-8deg);
}
50% {
  -webkit-transform: rotate(6deg);
}
60% {
  -webkit-transform: rotate(-4deg);
}
70% {
  -webkit-transform: rotate(3deg);
}
80% {
  -webkit-transform: rotate(-2deg);
}
90% {
  -webkit-transform: rotate(1deg);
}
100% {
  -webkit-transform: rotate(0deg);
}
}
@-o-keyframes wiggle {
 10% {
  -o-transform: rotate(14deg);
}
20% {
  -o-transform: rotate(-12deg);
}
30% {
  -o-transform: rotate(10deg);
}
40% {
  -o-transform: rotate(-8deg);
}
50% {
  -o-transform: rotate(6deg);
}
60% {
  -o-transform: rotate(-4deg);
}
70% {
  -o-transform: rotate(3deg);
}
80% {
  -o-transform: rotate(-2deg);
}
90% {
  -o-transform: rotate(1deg);
}
100% {
  -o-transform: rotate(0deg);
}
}
@-ms-keyframes wiggle {
 10% {
  -ms-transform: rotate(14deg);
}
20% {
  -ms-transform: rotate(-12deg);
}
30% {
  -ms-transform: rotate(10deg);
}
40% {
  -ms-transform: rotate(-8deg);
}
50% {
  -ms-transform: rotate(6deg);
}
60% {
  -ms-transform: rotate(-4deg);
}
70% {
  -ms-transform: rotate(3deg);
}
80% {
  -ms-transform: rotate(-2deg);
}
90% {
  -ms-transform: rotate(1deg);
}
100% {
  -ms-transform: rotate(0deg);
}
}
@keyframes wiggle {
 10% {
  transform: rotate(14deg);
}
20% {
  transform: rotate(-12deg);
}
30% {
  transform: rotate(10deg);
}
40% {
  transform: rotate(-8deg);
}
50% {
  transform: rotate(6deg);
}
60% {
  transform: rotate(-4deg);
}
70% {
  transform: rotate(3deg);
}
80% {
  transform: rotate(-2deg);
}
90% {
  transform: rotate(1deg);
}
100% {
  transform: rotate(0deg);
}
}
.myWiggleClass {
  -moz-animation: wiggle;
  -webkit-animation: wiggle;
  -o-animation: wiggle;
  -ms-animation: wiggle;
  animation: wiggle;
}
于 2012-11-02T23:21:32.377 に答える