弹跳提示框---原生JavaScript手作

前端入坑纪 04

又逢周五，真是羡慕那些双休的程序媛/猿！今天跟着项目做了个弹跳的提示框

弹跳而出

一等大事：项目链接

HTML 结构

<a id="cbtn" href="javascript:;">出现吧，比卡丘</a> //用来点击的按钮
    <div id="fixBox"> //固定大小的黑色透明背景
        <div class="showOut"> //主角提示框
            <h2>温馨提示</h2>
            <div>
                比卡！比卡！比卡！
            </div>
            <a href="javascript:;">厉害</a> //点完这个就回到最初状态
        </div>
    </div>

这个HTML的结构很简单，没什么特殊的地方

CSS 结构

        body {
            font-family: "微软雅黑", Georgia, 'Times New Roman', Times, serif;
        }
        
        a {
            text-decoration: none;
            color: #333
        }
        
        #fixBox {
            display: none;
            position: fixed;
            z-index: 12;
            background: rgba(0, 0, 0, .3);
            top: 0;
            left: 0;
            bottom: 0;
            right: 0
        }
        
        .showOut {
            border-radius: 3px;
            background: #fff;
            color: #333;
            width: 90%;
            margin-top: 50%;
            margin-left: 5%;
            text-align: center;
            position: absolute;
        }
        
        .showOut h2 {
            font-weight: normal;
            padding: 0;
            margin: 0;
            padding: 3%
        }
        
        .showOut a {
            color: #333;
            border-top: 1px solid #ccc;
            display: block;
            height: 40px;
            line-height: 40px
        }
        
        .showOut div {
            padding-bottom: 5%;
        }
        
        .scaleFadeOut {
            animation: scaleFadeOut 320ms cubic-bezier(0.175, 0.885, 0.32, 1.275)
        }
        
        @keyframes scaleFadeOut {
            0% {
                opacity: 0;
                transform: scale(2, 2)
            }
            100% {
                opacity: 1;
                transform: scale(1, 1)
            }
        }

关键点：

• 提示框的动态效果主要还是靠贝塞尔曲线，当然也可以用内置的 ease等，只是没这么动感而已
• 透明的满屏背景用positon:fixed以及把背景这个盒子的四个角都定为0，top:0,bottom:0,left:0,right:0
• 由于设置关键帧keyframes的属性包含transform了，所以如果showOut这个盒子在定位时也用了transform:translate(x,y)属性，可能会导致冲突。这里笔者直接就用margin来定位了！

JavaScript 结构

         // 获取个元素
        var box = document.getElementById('fixBox'),
            cbtn = document.getElementById('cbtn'),
            stBox = document.getElementsByClassName('showOut')[0],
            aBtn = box.getElementsByTagName('a')[0];

        // 不同按钮点击时，切换对应的样式和class
        cbtn.addEventListener('click', function() {
            box.style.display = "block";
            stBox.className = "showOut scaleFadeOut";
        });

        aBtn.addEventListener('click', function() {
            box.style.display = "none";
            stBox.className = "showOut";
        });

这个JavaScript的结构也很明确，没什么特殊的

Ps:My skill's not better enough! 如有错漏，还请不吝赐教