HTMl 原生实现简单的toast 消息提示

一，需求分析

1，装toast组件容器需要为一个从上往下进行布局的内容
2，toast组件添加后需要播放消失动画
消失动画的表现方式
1，布局往上推，然后缓慢变透明直至消失
2，消失过程中，后加入的toast位置随着逐渐消失的toast的位置改变而跟着改变

二，代码实现

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易Toast实现</title>
    <style>
        .toast-layout{
            position: fixed;
            width: 100vw;
            height: 100vh;
            text-align: center;
        }
        .toast .content{
            margin: auto;
            margin-bottom: 16px;
            width: max-content;
            padding: 20px;
            text-align: center;
            color: white;
            background-color: black;
            border-radius: 28px;
        }

        .hide-toast{
            animation:remove .5s ease-out;
        }
        @keyframes remove {
            from{
                height: 56px;
                opacity: 1;
            }
            to{
                height: 0;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <script>
        function showToast(content, duration) {
            var toast = document.getElementById("Toast")
            if (toast == null) {
                var toast = document.createElement("div")
                toast.setAttribute("id", "Toast")
                toast.setAttribute("class", "toast-layout")
                document.body.appendChild(toast)
                showToast(content, duration)
                return
            }
            var toastItem = document.createElement("div")
            toastItem.setAttribute("class", "toast")
            toastItem.innerHTML = '<div class="content">' + content + '</div>'
            setTimeout(function () {
                toastItem.setAttribute('class', 'toast hide-toast')
            }, duration)
            toastItem.onanimationend = function () {
                toastItem.remove()
            }
            toast.appendChild(toastItem)

        }
    </script>
    <button onclick="showToast('你好啊你好啊', 1200)">测试</button>
</body>

</html>

三，演示

 

 查看安卓版本

posted @ 2022-06-17 11:24  Dmail  阅读(836)  评论(0)    收藏  举报