LoginSignup
0
0

More than 3 years have passed since last update.

Mixinでanimationの関数化

Last updated at Posted at 2020-11-06

Animationの関数化Mixinについて

mixinを使ってanimationプロパティをまとめると、
使用するときに名前だけ設定すればmixin内のanimationプロパティがdefault値として適用されます。

mixinの設定

 ↓ のようにmixinにanimationプロパティをぶち込みます。
ちなみにanimation:{}はanimation-OOOを省略してます。
面倒な設定ですが、一つひとつ設定するよりかはマシになります。

@mixin.animationNoNamae(
$name, 
$duration: 1s, 
$timing-function: ease,
$iteratin-count: infinite,
$direction: normal
){
animation: {
name: $name;
duration: $duration;
timing-function: $timing-function;
iteration-count: $iteration-count;
direction: $direction;
}

これでmixinの設定が完了しました。
mixinの引数に入れた値がanimation使用時のdefault値として設定されています。
この設定を引き出す値はここでは animationNoNamae です。

mixinの使い方

animationを適用したい要素内で ↓ のように
@include animationNoNamae を記載する。

nanikanoYouso {
@include animationNoNamae(
$name: OOO
);
}

$name: OOOはテキトーに設定します。
テキトーに名付けた値で、animationのための@keyframesを設定します。

@keyframes OOO{
0% {
~~
}
100% {
~~
}

これでnanikanoYousoにanimationが適用されます。

 ↓ mixinで設定した値はdefault値になるので、上書きできます。

@include animationNoNamae (
$name: ~~~;
$duration: 20s;
);

かなり雑な説明になりましたがこれで終わります。

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0