[jQuery再現]CSSとJavaScriptで作るJqueryフェードイン・フェードアウトメソッドっぽいもの

2021.08.04

CSSのanimationプロパティとJavaScriptを組み合わせて、jQueryのフェードイン・フェードアウトメソッドに近い物を作ります。
アニメーション部分をJavaScriptではなく、CSSで行うことも目的とします。

サンプル

#fade-in-el

fadeIn(document.querySelector('#fade-in-el'));

fade-out-el

fadeOut(document.querySelector('#fade-out-el'));

デュレーションとイージングを指定する事が可能です。

#fade-in-el2

fadeIn(document.querySelector('#fade-in-el2'), 1000, 'ease-in');

fade-out-el2

fadeOut(document.querySelector('#fade-out-el2'), 2000, 'linear');

使用方法

CSS、JavaScriptを適用するとJavaScript上でjQueryメソッドのように利用できるようになります。

fadeIn(【ターゲット】, 【デュレーション】, 【イージング】);
fadeOut(【ターゲット】, 【デュレーション】, 【イージング】);
  • ターゲットに動作させたい要素を指定。
    デュレーション、イージングは省略可能。
  • デュレーションはミリ秒(ms)の整数で指定。
    整数のみでない場合や空白・記載がない場合は400msで動作する。
  • イージングはCSSの「transition-timing-function」を指定。
    記載がない場合はeaseで動作する。
    （イージングを指定する場合、デュレーションを省略することはできません。
    デュレーションがデフォルトで構わない場合には空白(“”)を指定しましょう。）

コードの利用は自己責任でお願いします。

CSS

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
  • CSSではkeyframesの設定のみを行います。
    fade-inさせる要素には「display:none」や「opacity:0」をつける事を忘れないでください 。

JavaScript

function fadeIn(target, duration, ease) {
    var motion = "fade-in";
    target.style.display = 'block';
    animation(target, duration, ease, motion);
}

function fadeOut(target, duration, ease) {
    var motion = 'fade-out';
    animation(target, duration, ease, motion);
    target.addEventListener('animationend', function () {
        target.style.display = 'none';
    });
}

function animation(target, duration, ease, motion) {
    if (/^-?[0-9]+$/.test(duration)) {
        duration = duration + 'ms';
    } else {
        duration = '400ms';
    }
    target.style.animation = [motion, "forwards", duration, ease].join(" ");
}

解説

フェードアニメーションにはCSSのanimationプロパティを使用するため、最初にkeyframesの設定を行います。

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

内容は単純で、opacityを0から1にする「fade-in」、1から0にする「fade-out」を作成します。

JavaScriptでは、それぞれの関数を作成します。
まずは関数「fadeIn」を作成し、3つの引数(target, duration, ease)を指定しました。

function fadeIn(target, duration, ease) {
    var motion = "fade-in";
    target.style.display = 'block';
    animation(target, duration, ease, motion);
}

関数内ではまず変数「motion」にCSSで作成したkeyframesの名前を設定します。
フェードインの場合にはターゲットが「display:none」で非表示になっている事が基本かと思いますので、「display:block」でターゲットの表示を行います。
作成した変数と受け取った引数をさらに関数「animation」に渡します。

function animation(target, duration, ease, motion) {
    if (/^-?[0-9]+$/.test(duration)) {
        duration = duration + 'ms';
    } else {
        duration = '400ms';
    }
    target.style.animation = [motion, "forwards", duration, ease].join(" ");
}

関数「animation」では、受け取ったデュレーションのチェックを行い、整数であれば文字列「ms」を最後につけます。
逆に整数ではないならデフォルトの「400ms」に変更してしまいます。

整数チェックが完了したら、ターゲットのCSSのanimationプロパティに、変数「motion」、文字列「forwards」、チェックした「duration」、引き継いだ「ease」を繋げた物を設定します。
要は以下のようなCSSをターゲットに付与するわけです。

animation: fade-in forwards 1000ms ease-in;

(forwardsはアニメーションが完了した時にCSSの状態をそのままにするという物です。
これが無い場合は「opacity0→1」と変更しても、完了と同時に0に戻ってしまいます。)

以上で「animation」プロパティが付与されたことにより、CSSがアニメーションを行いフェードインが実装できました。

フェードアウトの場合もほとんど同じです。

function fadeOut(target, duration, ease) {
    var motion = 'fade-out';
    animation(target, duration, ease, motion);
    target.addEventListener('animationend', function () {
        target.style.display = 'none';
    });
}

最初に、変数「motion」にはCSSで作成したfade-outを指定します。
ターゲットは既に表示されているのでdisplayプロパティの変更は必要ありません。
フェードイン同様に関数「animation」を実行し、ターゲットに対してanimationプロパティを付与することでフェードアウトアニメーションを行います。

最後がフェードインと少し違い、ターゲットに対して「animationend」をトリガーにしたイベントを設定します。
これはアニメーションが終わった時にイベントを実行するという物で、そのイベントでターゲットに「display:none」を付与する様にします。
これでアニメーションが終わると同時に要素が非表示になり、フェードアウトが実装できました。

以上で完了です。

タイトルとURLをコピーしました