アニメーション通知でフェードアウトやクリックオフしてみる / Animation notice, fadeout and click off

Demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notice test</title>

    <!--
        https://qiita.com/cozynooks/items/d9430c2dee4bde84fece
        https://developer.mozilla.org/ja/docs/Web/API/Node/insertBefore
    -->

    <style>
        #notice {
            display: flex;
            flex-direction: column;

            position: absolute;
            top: 0;
            right: 0;
            width: 50%;

            padding: 8px;

            box-sizing: border-box;
        }

        .notice {
            transition: all 300ms;
            /* A */

            z-index: 99;
            opacity: 1;

            box-sizing: border-box;
            width: 100%;
            padding: 15px;
            margin: 0 auto 20px auto;

            color: #a94442;
            border: 1px solid #ebccd1;
            border-radius: 4px;
            background-color: #f2dede;

            animation: fadeout 1s linear 3s 1;
            animation-fill-mode: forwards;
        }

        @keyframes fadeout {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }
    </style>

</head>

<body>
    <div id="notice">
        <span id="notice-under">foobar</span>
    </div>
</body>


<script>
    function notice(s) {
        // 新しいノードを作成
        let newNode = document.createElement("div");
        newNode.classList.add("notice");
        newNode.innerHTML = `<span>` + s + `</span>`;

        // 親ノード
        let notice = document.getElementById("notice");

        // 起点ノード
        let noticeUnder = document.getElementById("notice-under");

        notice.insertBefore(newNode, noticeUnder);

        setTimeout(() => {
            newNode.style.margin = 0;
            newNode.style.padding = 0;
            newNode.style.height = 0;
        }, 4000) /* B */
        setTimeout(() => {
            newNode.remove();
        }, 4300) /* A, B */

        newNode.addEventListener("click", () => {
            setTimeout(() => {
                newNode.style.margin = 0;
                newNode.style.padding = 0;
                newNode.style.height = 0;
                newNode.style.lineHeight = 0;
                newNode.style.overflow = "hidden";
                newNode.style.border = "none";
            }, 310) /* A */
            newNode.style.opacity = 0;
        })
    }

    // test
    let i = 1;
    notice(i++);
    setTimeout(() => {
        notice(i++);
    }, 2000);
    setTimeout(() => {
        notice(i++);
    }, 3000);
    setTimeout(() => {
        notice(i++);
    }, 4000);

</script>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

<!DOCTYPE html>

<head>

<title>Notice test</title>

<!--

https://qiita.com/cozynooks/items/d9430c2dee4bde84fece

https://developer.mozilla.org/ja/docs/Web/API/Node/insertBefore

-->

<style>

#notice {

display: flex;

flex-direction: column;

position: absolute;

top: 0;

right: 0;

width: 50%;

padding: 8px;

box-sizing: border-box;

}

.notice {

transition: all 300ms;

/* A */

z-index: 99;

opacity: 1;

box-sizing: border-box;

width: 100%;

padding: 15px;

margin: 0 auto 20px auto;

color: #a94442;

border: 1px solid #ebccd1;

border-radius: 4px;

background-color: #f2dede;

animation: fadeout 1s linear 3s 1;

animation-fill-mode: forwards;

}

@keyframes fadeout {

0% {

opacity: 1;

}

100% {

opacity: 0;

}

</style>

</head>

<body>

<span id="notice-under">foobar</span>

</div>

</body>

function notice(s) {

// 新しいノードを作成

let newNode = document.createElement("div");

newNode.classList.add("notice");

newNode.innerHTML = `<span>` + s + `</span>`;

// 親ノード

let notice = document.getElementById("notice");

// 起点ノード

let noticeUnder = document.getElementById("notice-under");

notice.insertBefore(newNode, noticeUnder);

setTimeout(() => {

newNode.style.margin = 0;

newNode.style.padding = 0;

newNode.style.height = 0;

}, 4000) /* B */

setTimeout(() => {

newNode.remove();

}, 4300) /* A, B */

newNode.addEventListener("click", () => {

setTimeout(() => {

newNode.style.margin = 0;

newNode.style.padding = 0;

newNode.style.height = 0;

newNode.style.lineHeight = 0;

newNode.style.overflow = "hidden";

newNode.style.border = "none";

}, 310) /* A */

newNode.style.opacity = 0;

})

}

// test

let i = 1;

notice(i++);

setTimeout(() => {

notice(i++);

}, 2000);

setTimeout(() => {

notice(i++);

}, 3000);

setTimeout(() => {

notice(i++);

}, 4000);

</script>

</html>

コメントを残す