1

多くのアニメーションを計画しており、すべてのブラウザに対応するためのよりクリーンな方法を探しています。このような生意気なものは素晴らしいでしょう:

@each $browser in '-webkit-', '-moz-', '-o-', '-ms-' {
  @#{$browser}keyframes rotate {
    from { #{$browser}transform: rotate(0deg);}
    to { #{$browser}transform: rotate(360deg);}
  }
}

ただし、 の@#{$vendor}keyfr...後に数値または関数が必要であるとエラーが発生します@。@css へのスルーを強制する方法はありますか?

@eachそれ以外の場合、これを実現するためのよりクリーンな方法、@mixinまたはすべてのブラウザのすべてのアニメーションをリストすることから節約できる他の何かを思いついた人はいますか?

@-webkit-keyframes rotate {
  from { -webkit-transform: rotate(0deg);}
  to { -webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
  from { -moz-transform: rotate(0deg);}
  to { -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate {
  from { -o-transform: rotate(0deg);}
  to { -o-transform: rotate(360deg);}
}

@-ms-keyframes rotate {
  from { -ms-transform: rotate(0deg);}
  to { -ms-transform: rotate(360deg);}
}
4

2 に答える 2

6

ループ内でベンダーを動的に生成する代わりに、ベンダーのキーフレームを事前に定義する mixin を使用してこれを行うことができます。これらの線に沿った何か：

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

@include keyframes('rotate') {
    from { #{$browser}transform: rotate(0deg);}
    to { #{$browser}transform: rotate(360deg);}
}

デモ

于 2013-11-17T01:25:17.670 に答える
0

モッズを続けるためだけに...

http://sassmeister.com/gist/554597ba07c49dbd92ce

@include makeKeyframes('badgeGlow') {
  from { @include box-shadow(0px 0px 10px rgba($glowToColor, 0.3), 0px 1px 2px rgba(0, 0, 0, .80));color:$glowBaseColor;border-color: $glowBaseColor;}
  50% { @include box-shadow(0px 0px 16px rgba($glowToColor, 0.8), 0px 1px 2px rgba(0, 0, 0, .80));color:white;border-color: lighten($glowBaseColor, 20);}
  to { @include box-shadow(0px 0px 10px rgba($glowToColor, 0.3), 0px 1px 2px rgba(0, 0, 0, .80));color:$glowBaseColor;border-color: $glowBaseColor;}
}

button.glow {
  @include setKeyframeType('badgeGlow',1.5s,infinite);
}

ここで、keyFrame ジェネレーターを一度呼び出すと、setKeyframeType mixin を使用してクラス内の他の場所からキーフレームを参照し、いくつかの基本的なパラメーターを提供できることに注意してください。同じタイプのトランジションを共有する要素が多数ある場合に最適です。

于 2014-05-16T13:53:45.853 に答える