web-dev-qa-db-ja.com

複数のステージと変換プロパティを含むアニメーションキーフレーム用のSassMixin

これが私が作成しようとしている標準のCSSですが、SASSMixinを使用して作業を行いたいと考えています。

標準CSS

@-webkit-keyframes crank-up {
  100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes crank-up {
  100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes crank-up {
  100% { -o-transform: rotate(360deg);}
}
keyframes crank-up {
  100% { transform: rotate(360deg);}
}

私は次の投稿と同じミックスインを使用しています SASSキーフレームが希望どおりにコンパイルされていません これを以下に示します。

混入します

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
      @content;
  }
  @-moz-keyframes #{$name} {
      @content;
  }
  @-ms-keyframes #{$name} {
      @content;
  }
  @keyframes #{$name} {
      @content;
  }
}

ベンダープレフィックスを必要とするプロパティがキーフレームに含まれていない限り、上記は問題ありません。ベンダープレフィックス付きのすべてのキーフレームに（この場合は）-webkit-プレフィックスが適用されるため、transformプロパティと同様です。例えば：

SCSS

@include keyframes(crank-up) {
  100% { -webkit-transform: rotate(360deg);}
}

CSS

@-webkit-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
@-moz-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
@-ms-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
@keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }

上記の-webkit-と-moz-keyframeに注意してください。 -moz-である必要があります

したがって、私の最初の考えは、上記のミックスインを次のように変更することでした。

変更されたミックスイン

@mixin keyframes($first-name, $last-name, $argument) {
  @-webkit-keyframes #{$first-name} {
    -webkit-#{$last-name}: #{$argument};
  }
  @-moz-keyframes #{$first-name} {
    -moz-#{$last-name}: #{$argument};
  }
  @-o-keyframes #{$first-name} {
    -o-#{$last-name}: #{$argument};
  }
  @keyframes #{$first-name} {
    #{$last-name}: #{$argument};
  } 
}

次のように見えるミックスインへの呼び出しで

SCSS

@include keyframes(crank-up, transform, rotate(360deg)) { }

CSS

@-webkit-keyframes crank-up { -webkit-transform: rotate(360deg); }
@-moz-keyframes crank-up { -moz-transform: rotate(360deg); }
@-o-keyframes crank-up { -o-transform: rotate(360deg); }
@keyframes crank-up { transform: rotate(360deg); }

これは、キーフレームの「ステージ」が1つしかない場合は問題なく機能します（元のコードを参照してください。ページの上部にあり、100％のマークしかありません）。キーフレームの「ステージ」に関して私の用語が少しずれている場合は言い訳になります。

問題

上記のようなミックスインを次のようなもので動作させたいです。

@-webkit-keyframes crank-up {
  20%,
  40% { -webikit-transform: translateY(34px); }
  80% { opacity: .8; }
  100% { -webkit-transform: rotate(360deg);}
}

また、2つのCompassAnimateプラグインについても調べました。 compass-animation および新しい compass-animate ですが、これらが役立つかどうかはよくわかりません。変数を追加してミックスインでこれをテストする方法が必要ですが、変数をミックスインに渡すことが可能かどうかわかりません。

どんな助けでも大歓迎です。ありがとう

私は次のことをいじっていますが、どちらもうまくいきません。私がどこで間違っているのか誰かが知っているかどうかを確認するためにそれらを合計すると思いました。

実験的ミックスイン：

@mixin vendor-prefix($name, $argument, $webkit: "-webkit-", $moz: "-moz-",$o: "-o-", $stale: ""){
  #{$webkit}: #{$name}: #{$argument};
  #{$moz}: #{$name}: #{$argument};
  #{$o}: #{$name}: #{$argument};
  #{$stale}: #{$name}: #{$argument};
}

@mixin vendor-prefix($last-name, $argument){
  @if $name == webkit { 
    -webkit-#{$name}: #{$argument};
  } @else if $name == moz { 
    -moz-#{$name}: #{$argument};
  } @else if $name == o { 
    -o-#{$name}: #{$argument};
  } @else { 
    #{$name}: #{$argument};
  } 
}
css3sassmixinscss-animations
7
fidev

ベンダープレフィックスを処理するには、sassミックスインの代わりに Autoprefixer を使用することをお勧めします。

Autoprefixerインターフェースはシンプルです。ベンダープレフィックスを忘れて、最新のW3C仕様に従って通常のCSSを記述してください。特別な言語（Sassなど）や特別なミックスインは必要ありません。

AutoprefixerはCSSのポストプロセッサであるため、Sass、Stylus、LESSなどのプリプロセッサでも使用できます。

したがって、あなたの場合、あなたはこれを書く必要があります：

@keyframes crank-up {
  20%,
  40% { -webkit-transform: translateY(34px); }
  80% { opacity: .8; }
  100% { -webkit-transform: rotate(360deg);}
}

そして、autoprefixerはそれを自動的に次のように変換します。

@-webkit-keyframes crank-up {
  20%, 40% {
    -webkit-transform: translateY(34px);
  }

  80% {
    opacity: .8;
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes crank-up {
  20%, 40% {
    -webkit-transform: translateY(34px);
  }

  80% {
    opacity: .8;
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

Autoprefixerは広くサポートされており、このツールを使用して、Compass、Grunt、Sublime Text、node.js、Ruby、Ruby on Rails、PHP ...

ここ プロジェクトの詳細です

10
Alex Guerrero

すでにCompassを使用していて、余分なライブラリのバウンス全体をロードしたくなく、ミキシングを記述したい場合は、 [〜＃〜] this [〜＃〜] が最適なオプションです。

/* animation mixing
keyframe animation
@include animation('animation-name .4s 1')*/

@mixin animation($animate...) {
$max: length($animate);
$animations: '';

@for $i from 1 through $max {
    $animations: #{$animations + nth($animate, $i)};

    @if $i < $max {
        $animations: #{$animations + ", "};
    }
}
-webkit-animation: $animations;
-moz-animation:    $animations;
-o-animation:      $animations;
animation:         $animations;
}

そして、これが特定のブラウザベンダープレフィックス内にCSS3プロパティを含めるためのキーフレームミキシングです。@ includetranslateの代わりに、完全なcssを使用します（注：Sass 3.3以前を使用している場合は、!globalフラグを削除する必要があります） ：

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        $browser: '-webkit-' !global;
        @content;
    }
    @-moz-keyframes #{$animationName} {
        $browser: '-moz-' !global;
        @content;
    }
    @-o-keyframes #{$animationName} {
        $browser: '-o-' !global;
        @content;
    }
    @keyframes #{$animationName} {
        $browser: '' !global;
        @content;
    }
} $browser: null;

参考までに、SASSの例を次に示します。

@include keyframes(animation-name) {
   0% {
       #{$browser}transform: translate3d(100%, 0, 0);
   }
   100% {
      #{$browser}transform: translate3d(0%, 0, 0);
   }
}

そしてここで、アニメーションを特定のクラスまたはIDに含める方法

.new-class {
@include animation('animation-name 5s linear');
}

それで全部です。

10
Jimba Tamang