vanillaJSでフラッシュメッセージを表示

5548 ワード
JavaScript Vanilla.JS JavaScript テキストリンク

Vanilla.JSでFadeIn/Outをするサンプルです。

出典：Fade in - Fade out with JavaScript | Chris Buttery

// flash message
function flash(el, out) {
    fadeIn(el, "inline-block");
    setTimeout(function () {
        fadeOut(el);
    }, out);
}
// fade out
function fadeOut(el) {
    el.style.opacity = 1;

    (function fade() {
        if ((el.style.opacity -= .1) < 0) {
            el.style.display = "none";
        } else {
            requestAnimationFrame(fade);
        }
    })();
}
// fade in
function fadeIn(el, display) {
    el.style.opacity = 0;
    el.style.display = display || "block";

    (function fade() {
        var val = parseFloat(el.style.opacity);
        if (!((val += .1) > 1)) {
            el.style.opacity = val;
            requestAnimationFrame(fade);
        }
    })();
}

<button onclick="flash(document.querySelector('#notify'), 1500)" type="button">Flash!</button>
<div style="display:none" id="notify">フラッシュ！</div>